Mehedi Islam Mehedi Islam - 4 months ago 18
Ajax Question

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

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


}
});
}


enter image description here
enter image description here

Answer

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