Я использую Bootstrap для создания этой веб-страницы. Эта страница содержит таблицу, в которой я использую modal для отображения более подробной информации о выбранном элементе.
Моя проблема в том, что все кнопки в таблице только перенаправляются на первую деталь первого элемента. Я подумывал об имени id и делал его в массив, но он не работает (или я сделал это неправильно).
Вот пример кода, который даст вам представление:
<?php (loop){ $itemtopic=$loop['item']; $data=$loop['data']; ?> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float:right; margin-left:5px;" title="New User"><?php echo $itemtopic; ?></button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Create New User</h4> </div> <div class="modal-body"> <?php echo $data; ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <?php } /* END OF LOOP */ ?>
Как я могу показать соответствующие данные с выбранным элементом, а не только первую деталь первого элемента?
вам не нужно зацикливать модальные элементы, вам нужно изменить данные перед отображением модального. пожалуйста, попробуйте следующий код:
<script> //Please visit http://www.nokiflores.com $(document).ready( function() { $("button.btn").click( function(e) { var parent_div = $(this).closes("div"); var val = $(parent_div).find("input[name=data]").val(); $("#modal_body").html(val ); $("#myModal").modal(); }); } ); }); </script> <?php $_data = array(); $_data[] = array('id'=>1,'data'=>"data1", 'item'=>"item1"); $_data[] = array('id'=>2,'data'=>"data2", 'item'=>"item1"); ?> <?php foreach($_data as $data ) { ?> <div class="data"> <input type="hidden" value="<?php echo $data['data'] ; ?>" name="data" /> <!--please notice that i remove the modal functions in this button--> <button class="btn btn-primary" id="<?php echo $data['id'] ; ?>" style="float:right; margin-left:5px;" title="New User"><?php echo $data['item'] ; ?></button> </div> <?php } ?> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Create New User</h4> </div> <div id="modal_body" class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
@Logon Wayne, немного немного расплывчатый о том, делаете ли вы это, так что можете ли вы подтвердить, что вы печатаете X-кнопки с X-модалами и что у них есть Matching Unique ID для каждой пары?
Например:
<?php $rows = array('1'=>"afasdf",'2'=>"fagagadfg"); foreach($rows as $key=>$data): ?> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $key;?>" style="float:right; margin-left:5px;" title="New User">Create New User</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Create New User</h4> </div> <div class="modal-body"> <?php echo $data; ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <?php endforeach; ?>
Ключ – уникальные идентификаторы, иначе он найдет и отобразит первый модальный заголовок #myModal.
Вы могли использовать только 1 модальный, если вы использовали ajax для замены содержимого на каждой загрузке, что не является тем, что вы делаете, и действительно не кажется нужным, если у вас нет действительно огромного количества html-печати из-за этого цикла, и в этом случае разбиение на страницы будет логический следующий шаг в любом случае.
🙂