CODEWITHSUNDEEP
phpjquerymodal-dialog
Rushabh M Shah
Rushabh M Shah

Reputation: 59

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>

Upvotes: 2

Views: 19670

Answers (3)

Zeeshan DaDa
Zeeshan DaDa

Reputation: 317

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.

Upvotes: 0

Isaac Ray
Isaac Ray

Reputation: 1361

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>

Upvotes: 8

usersuperman
usersuperman

Reputation: 1

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

Upvotes: 0

Related Questions