html - How can i show data into bootstrap panel dynamically by javascript?

Question

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

 <div class="panel panel-info class" style="height: 450px; width: 300px; overflow-y:scroll;">
       @foreach (var item in lstCategory)
       {
            <div class="panel-heading" id="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" onclick="collapse(@item.Id);" data-parent="#accordion" href="#@item.Id">@item.Name</a>
                </h4>
        </div>

       <div id="@item.Id" class="panel-collapse collapse in">
           <div id="file">
           </div>
        </div>

       }

</div>

javascript

   function collapse(id) {
    var id = id;

                $.ajax({
                    type: "GET",
                    url: "/Document/GetFileList",
                    data:{id:id},
                    success: function (response) {
                        //var panelbar = $find("<%= %>");
                        $("#file").html(response);


                    }
                });
}

Answer 1

This line on your javascript code adds everything on the same div, even if you have multiple divs, because you do not distinct the id of each div.

$("#file").html(response);

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);
        }
    });
}