To pass dynamic data to a bootstrap modal

Question

I am trying to load the comments of a particular post on a modal. For this I need to pass the post id to the modal and then fetch the corresponding comments. The modal is triggered by the following:

<a class="xyz" data-toggle="modal" data-target="#compose-modal" data-id="<?php echo $list[$i]->getID(); ?>">View Comments</a>

And the modal is defined at the bottom of the page as follows:

<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

        <!-- here i need to use php to fetch the comments using post id -->
        </div>
   </div>
</div>

Solution

PHP is executed before the page is returned to the browser. Once you see the page in your browser, all the PHP has already been executed. What you probably want to do is use AJAX. Here is a general outline of how you would do it:

Have a PHP page that takes the ID and returns the data you want as a JSON.

api.php

   $theId = $_POST['theId'];

   //Get the information you want, and turn it into an array called $data

   header('Content-Type: application/json');
   echo json_encode($data);

In your html, you should trigger the modal using an onclick attached to the "View Comments":

<a class="xyz" onclick = "launch_comment_modal(<?php echo $list[$i]->getID(); ?>)">View Comments</a>

then,at the bottom with your other javascript:

   <script>
    $('#compose-modal').modal({ show: false});

    function launch_comment_modal(id){
       $.ajax({
          type: "POST",
          url: "api.php",
          data: {theId:id},
          success: function(data){

          //"data" contains a json with your info in it, representing the array you created in PHP. Use $(".modal-content").html() or something like that to put the content into the modal dynamically using jquery.

        $('#compose-modal').modal("show");// this triggers your modal to display
           },

    });

 }

    </script>