jquery - How to Correctly Store Each Bootstrap Accordion Group Within a Separate PartialView -


attempting right has been frustrating experience. scenario when user clicks second header, call server using ajax , load result list second partialview. surrounded second partial div id in order override content data coming server, unfortunately, not work right. main goal make sure second list updated db.

below current structure:

view:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default">     @html.partial("_partialviewone", model.one) </div> <div class="panel panel-default" id="panel2">     @html.partial("_partialviewtwo", model.two) </div> 

partialview1:

<div class="panel-heading" role="tab" id="headingone"> <h4 class="panel-title">     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">         first group items     </a> </h4> </div> <div id="collapseone" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingone"> <div class="panel-body">     <div id="mylightboxes" class="list-group">             @foreach (var item in model)           {                <button type="button" class="list-group-item"    value="@item.personid">@item.name</button>            }     </div> </div> 

partialview2:

<div class="panel-heading" role="tab" id="headingtwo"> <h4 class="panel-title">     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">         first group items     </a> </h4> </div> <div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingtwo"> <div class="panel-body">     <div id="mylightboxes" class="list-group">             @foreach (var item in model2)           {                <button type="button" class="list-group-item"    value="@item.personid">@item.name</button>            }     </div> </div> 


Comments