Dear Reader, let us we know about “For editing data in modal popup with Dynamic ID passing“.
This scenario comes when any user like Admin or Superadmin wants to edit the form data of any particular registered user in a popup format. Then it would be necessary that the Dynamic ID (fetched from Database Table) of respective user would be send to that Popup Form. And all the respective values (like User’s Name, User’s Contact No, User’s Email Id and all )of that user would be placed on respective fields (Like Name, Contact No, Email Id).
Step 1. Place a link of Edit Button for editing data of Particular User
1 2 3 4 |
<td class="edit_td"> <a href="#edit_user" class="open-edit_user" data-toggle="modal" data-user_id="<?= $row_user['id']; ?>"> <span class="glyphicon glyphicon-edit"></span> </a> </td> |
Step 2. Place id of Modal Popup same as the Edit Button Link Id and ‘href’ link
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!--Edit Modal start--> <div class="modal fade" id="edit_user" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"> <b>User Registration Form</b> </h4> </div> <div class="modal-body"> <div class="fetched_user"></div> </div> <div class="modal-footer"></div> </div> </div> </div> <!--Edit Modal close--> |
Step 3. Write Script for getting Dynamic ID of that particular user on clicking of Edit Button.
And send that Dynamic ID to AJAX page for firing SQL Query for fetching all inserted field values of that User’s ID. When you get the required result row of all values then send it to your original page and set all values to HTML Fields, as set $(‘.fetched_user’).html(result); with the help of jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> // For editting data in modal popup with Dynamic ID passing start------- $(document).ready(function() { $('#edit_user').on('show.bs.modal', function (e) { var user_id = $(e.relatedTarget).data('user_id'); $.ajax( { type : 'POST', url : 'ajaxrequest/ajax_users.php?reg_id=<?= $regid ?>', //Here you will fetch records data : 'user_id='+ user_id, //Pass $user_id success : function(result) { //alert('success'+result); $('.fetched_user').html(result); //Show fetched data from database }, error : function(result) { alert('error'+result); } }); }); }); // For editting data in modal popup with Dynamic ID passing close-----------> </script> |
In this way you can display value of Dynamic ID on Modal Popup easily.
Congratulations you have successfully learned “For editing data in modal popup with Dynamic ID passing”, if you like this post and was helpful for you then share this post on social media and if you have any query then please contact us or comment below, Thanks.