14

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>
Your Common Sense
  • 156,878
  • 40
  • 214
  • 345
Rajbir
  • 411
  • 2
  • 4
  • 13

3 Answers3

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>
Shrikant Dighe
  • 3
  • 2
Mark Gerryl Mirandilla
  • 813
  • 1
  • 19
  • 42
  • 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 '18 at 06: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
 }
?>
Shehary
  • 9,926
  • 10
  • 42
  • 71
  • 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 09 '16 at 20:58
  • change `if($_POST['id']) {` to `if($_POST['rowid']) {` just a typo mistake – Shehary Jan 09 '16 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 '18 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, https://getbootstrap.com/docs/4.0/components/modal/ – Shehary Jan 22 '18 at 18:50
2

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

jerryurenaa
  • 3,863
  • 1
  • 27
  • 17