Passing a PHP variable to bootstrap modal

Question

I have a button created using a while loop. therefore, the while loop creates a table row for each row in the mysql table.

I have one line of code for a button that is created again for each row of the table, and each button has a different value based on the id for this entry.

 $order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>'; 

The problem is that I want to use this $row['ID'] and view it in modal mode so that I can get the record with the same identifier using the mysqli query.

Here is the code for modal.

 <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Edit Data</h4> </div> <div class="modal-body"> i want to save the id in a variable here so i can use it in a PHP  for this modal </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 1

If, I realized that you are right.

Modal launch button with $row['ID']

 $order .= '<td><a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="'.$row['ID'].'">Edit</a></td>'; 

Bootstrap Modal event to get the value of $row['ID'] using the Ajax method

 $(document).ready(function(){ $('#myModal').on('show.bs.modal', function (e) { var rowid = $(e.relatedTarget).data('id'); $.ajax({ type : 'post', url : 'fetch_record.php', //Here you will fetch records data : 'rowid='+ rowid, //Pass $id success : function(data){ $('.fetched-data').html(data);//Show fetched data from database } }); }); }); 

Modal html

 <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Edit Data</h4> </div> <div class="modal-body"> <div class="fetched-data"></div> //Here Will show the Data </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Last Create fetch_record.php , get a record and show in modal

 <?php //Include database connection if($_POST['rowid']) { $id = $_POST['rowid']; //escape string // Run the Query // Fetch Records // Echo the data you want to show in modal } ?> 

Answer 2

put it in your loop

 <button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button> 

 <div id="message<?php echo $row['id'];?>" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> <?php echo $row['id'];?> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Answer 3

adding modal in a loop is an automatic duplication of html content when there is no special need for it! It is not recommended to add modal elements to each element in the loop, and only call data when it is requested!

Here is an example, add the following button to the loop in PHP

 <button data-id="<?php echo $note['id']; ?>" onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click me </button> 

on your modal you can use this identifier to query your db or any json

an example assuming you are using a modal called showmodal, use this information to make a new request to your database or wish a class or function!

 <?php $dataid = '<span id="dataid"/>'; echo $dataid; ?> 

echo $ dataid serves only to show you that the identifier of the selected item in the loop really works.

as you can see here, we add only one HTML template to the loop, and we also only call the data when it is requested! it will save memory and also be faster.

I hope this helps a lot of people