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 tr

Answer 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>

Answer 2

I have just made an Esiest way to pass php dynamic data to Bootstrap modal in Laravel > 5 currently i am using larvel 7.

This is HTML DOM using onclick event, simplly call the JavaScript function

<li><a href="#" onclick="showModal('{{$abc->id}}')">Some Option</a></li>

& pass Dynamic Variable.

This is JavaScript Code

<script type="text/javascript">
  function showModal(id=0){
    $('#collectionModal').modal('show');
    // here is the id of that element where do you want to display / have the passed value
    // in my case i am taking in a hidden input which id is = bookID , i am using a form in my modal that why
    $('#bookID').val(id);
  }
</script>

This is modal's HTML where i am getting the passed value like:

<input type="hidden" name="book_id" id="bookID" value="">

and finally i am submiting the form in modal using javaScript & Ajax.

Answer 3

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