15

I have a button that is created using a while loop. so the while loop creates a table row for each row in a mysql table.

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

$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 that $row['ID'] and view it in a modal so I can retrieve the record with the same ID using mysqli query.

Here is the code for the 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 script for this modal
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
8

3 Answers 3

28

put this inside 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>
1
  • 4
    Great option for one or two records... Any options for a query return with lots of records? This method would generate modal code for every record which would be overkill. Any suggestions for this?
    – Davo
    Dec 10, 2018 at 6:21
20

If, I got you correct.

The modal trigger 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 fetch the $row['ID'] value with 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, retrieve the 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
 }
?>
4
  • this looks like exactly what im looking for, however it says that there is a undefined index: id on line 3 which is if($_POST['id'] {
    – Rajbir
    Jan 9, 2016 at 20:58
  • change if($_POST['id']) { to if($_POST['rowid']) { just a typo mistake
    – Shehary
    Jan 9, 2016 at 20:59
  • I used this technique previously and it worked perfectly. But once I updated to Bootstrap 4, the modals will open but won't close! Has anyone else seen this occur?
    – Mark
    Jan 22, 2018 at 18:02
  • @Mark you need to inspect the page using browser console or check modal may be some old css or custom css causing the problem, there is no major change in BS4 modal expect some css changes to bring the modal in center of screen or dynamic height option, getbootstrap.com/docs/4.0/components/modal
    – Shehary
    Jan 22, 2018 at 18:50
3

adding the modal in a loop is auto duplicating the html content when it is not really necessary! it is not a good practice to add a modal to each item in a loop instead call the data only when it is requested!

here is an example add the following button to a 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 know use that id to make a request to your db or any json

example assuming you are using a modal called showmodal use this info to make a new request to your database or desire class or function!

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

The echo $dataid is only to show you that the id of the clicked item in the loop really works.

as you can see here we are only adding 1 single html template in the loop and we are also only calling data when it is being requested! this will save memory and also will be faster.

I hope this helps many people

1
  • This was the only solution I could find that worked for multiple modal links in a loop Oct 28, 2022 at 11:15

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.