To pass dynamic data to a bootstrap modal

问题

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>

回答1:

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>

回答2:

Just pass the content via ajax with a php page and echo the content in the modal

来源：https://stackoverflow.com/questions/25916915/to-pass-dynamic-data-to-a-bootstrap-modal

标签

php

jquery

modal-dialog