passing value from php to modal

Question

I'm trying learn to pass a value from a php to modal but it does not seems to work, there are no errors in console.

this is my php inside a while loop

echo'
  <tbody>
    <tr>
      <td>'.$row->equipID.'</td>
      <td>'.$row->equipType.'</td>
      <td>
        <a href="#editModal" class="btn btn-info btn-xs" data-id="'.$row->equipID.'" data-toggle="modal">
        <i class="fa fa-pencil"></i> Edit </a>
      </td>
    </tr>
  </tbody>';

this is the html file where i want to pass the value from the php

<div class="modal fade" id="editModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <h3 class="modal-title">Edit Truck Category</h3>
      <div class="modal-body">
        <form>
          <div class = "fetched-data"></div>
          <input type="text" id="truck" placeholder="Truck Category *"  required>
        </form>
      </div>
    </div>
  </div>
</div>

this is my js

<script>
  $(document).ready(function(){
    $('#editModal').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
            }
        });
     });
  });
</script>

Thank you very much in advance.

Did you print the php output in log file or directly in browser(without using ajax) and verify whether you get the valid html output code from php? — divine, Jul 03 '17 at 00:19
console.log(data) inside success and see if it's what you expect. — Matt, Jul 03 '17 at 00:21
there's no value. i also tried to put alert('success'); inside success but it doesn't popping out so i can't verify if the data passed from php is correct — Onitech, Jul 03 '17 at 00:31
@NoobProgramer check first your fetch_record.php if its returning the data — Poldo, Jul 03 '17 at 00:35
Does this answer your question? [Pass PHP variable to bootstrap modal](https://stackoverflow.com/questions/34693863/pass-php-variable-to-bootstrap-modal) — sanoj lawrence, Apr 19 '20 at 16:16

score 0 · Accepted Answer · answered Jul 03 '17 at 01:37

0

I forgot to include

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

answered Jul 03 '17 at 01:37

Onitech

85
1
15

score 0 · Answer 2 · answered Jul 03 '17 at 06:03

You may use load function to implement the above functionality. I will describe it by using an example. Please note I have only included the code segments which are required to explain.

1.I am returning a table from the PHP file (assume: file name- data.php).

$table = "<table class='table table-bordered'>";
// Table data
$table.="</table>";
echo $table;

2.Modal to show the data.

<div id="mymodal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body mymodal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

3.Load data to the modal body

$('.mymodal-body').load('/data.php', function (result) {
        $('#mymodal').modal({show: true});

I wish the above code samples will help you get an idea for your issue. You may give a try using the load function.

passing value from php to modal

2 Answers2