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


                    }
                });
}

Aristos · Accepted Answer · 2016-08-01 07:16:32Z

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="[email protected]">
</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);
        }
    });
}

answered Aug 1, 2016 at 7:16

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mehedi Islam Over a year ago

Aristos, can u tell me how can i get expanded panel value/id/name? I tried but getting alws first panel name/id. <a data-toggle="collapse" onclick="collapse(@item.Id);" name="@item.Name" id="collapse" href="#@item.Id">@item.Name</a> var panelId = $(".collapse").attr("name");

Aristos Over a year ago

@MehediIslam this is a different question, you must act similar with this one

Mehedi Islam Over a year ago

Aristos,i already post this type problem that i could not solve.If u see this and solve this it will be help for me. stackoverflow.com/questions/38716995/…

bencrinkle · Accepted Answer · 2016-08-01 07:17:01Z

1

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="[email protected]"></div>

and then do

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

in your success callback

answered Aug 1, 2016 at 7:17

bencrinkle

2985 silver badges14 bronze badges

1 Comment

Mehedi Islam Over a year ago

Hi Bencrinkle, can u tell me how can i get expanded panel value/id/name? I tried but getting alws first panel name/id. <a data-toggle="collapse" onclick="collapse(@item.Id);" name="@item.Name" id="collapse" href="#@item.Id">@item.Name</a> var panelId = $(".collapse").attr("name");

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related