How Can I Show Data Into Bootstrap Panel Dynamically By Javascript?

How can show data into bootstrap panel dynamically when i click any panel?When i clicked each of a panel that data showed only into first panel. index

Copy

The solution is to add different ids on each div using the @item.Id and then use that id to add the correct content on the correct id.

Eg add the id on the div

<div id="file_@item.Id">
</div>

then on javascript use the id to find that div.

function collapse(id) {
    var id = id;
    $.ajax({
        type: "GET",
        url: "/Document/GetFileList",
        data:{id:id},
        success: function (response) {
            $("#file_" + id).html(response);
        }
    });
}

Solution 2:

It's because you are injecting the response of the ajax call into the div with the id of file, which will always add it to that first panel. Try adding a class to the file div which is constructed from the id and then inject into that element instead. something like...

<div class="file_@item.Id"></div>

and then do

$(".file_" + id).html(response);

in your success callback

Share