php - How can I display tabs within an iterated Modal? -


i have tabs within modal iterated through clicks of different buttons. when first button clicked, tabs can opened. not work second button. although first tab displays details row button located works fine , displays correct information linked button. how tabs work after $k increases? here have:

<?php for($k=0; $k<$bookingcount; ++$k){ ?>  <div id="bookingdetails<?php echo $k; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">  <div class="modal-header">...</div>  <div class="modal-body"> <div class="row-fluid sortable">     <div class="box span12"> <div class="box-content">  <ul class="nav nav-tabs" id="mytab">         <li><a href="#details" data-toggle="tab" class="active">details</a></li>         <li><a href="#sms" data-toggle="tab">sms</li>         <li><a href="#email" data-toggle="tab">email</li>         <li><a href="#phone" data-toggle="tab">phone</li>         <li><a href="#post" data-toggle="tab">post</li> </ul>  <div class="tab-content">     <div class="tab-pane active" id="details">...</div>     <div class="tab-pane" id="sms">...</div>     <div class="tab-pane" id="email">...</div>     <div class="tab-pane" id="phone">...</div>     <div class="tab-pane" id="post">...</div> </div>  <div class="modal-footer">...</div>  <?php } ?> 

on every iteration creating tab-panes same id, javascript responsible switching tabs operates on first element given id, that's why tabs in first modal working.

you should add $k hrefs , ids on every iteration:

<ul class="nav nav-tabs" id="mytab">     <li><a href="#details_<?=$k ?>" data-toggle="tab" class="active">details</a></li>     <li><a href="#sms_<?=$k ?>" data-toggle="tab">sms</li>     <li><a href="#email_<?=$k ?>" data-toggle="tab">email</li>     <li><a href="#phone_<?=$k ?>" data-toggle="tab">phone</li>     <li><a href="#post_<?=$k ?>" data-toggle="tab">post</li> </ul>  <div class="tab-content">     <div class="tab-pane active" id="details_<?=$k ?>">...</div>     <div class="tab-pane" id="sms_<?=$k ?>">...</div>     <div class="tab-pane" id="email_<?=$k ?>">...</div>     <div class="tab-pane" id="phone_<?=$k ?>">...</div>     <div class="tab-pane" id="post_<?=$k ?>">...</div> </div> 

Comments

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -