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>

possible duplicate of [Passing data to a bootstrap modal](http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) — jcvegan, Sep 18 '14 at 15:39
yes i tried many options. Using the following: $('a[data-toggle=modal], button[data-toggle=modal]').click(function () { var data_id = ''; if (typeof $(this).data('id') !== 'undefined') { data_id = $(this).data('id'); } $('#my_element_id').val(data_id); }) }); I set the value of an input field in the modal as the post id. but i cannot access the value in php form to fetch the comments — Rushabh M Shah, Sep 18 '14 at 15:40
i referred that article. But in that the data passed is used directly. it is not used as a php variable to fetch data. Which appears as an issue — Rushabh M Shah, Sep 18 '14 at 15:43
yes i need to use PHP to fetch the data based on the postid passed to the modal. i have tagged jQuery as it appears to provide a partial solution. jQuery can be used to pass the data to the modal but i need to fetch that data into a php variable. — Rushabh M Shah, Sep 18 '14 at 15:48

Isaac Ray · Accepted Answer · 2017-03-17T20:24:28.977

8

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>

edited Mar 17 '17 at 20:24

answered Sep 18 '14 at 16:44

Isaac Ray

1,351
9
17

the modal does not load. is it because of the default bootstrap? – Rushabh M Shah Sep 18 '14 at 18:21
What do you mean by "does not load"? Doesn't display on click? Can you see what is happening in the console? – Isaac Ray Sep 18 '14 at 18:35
THis is just a guess, but if you copied my javascript code directly, it was missing a closing paren... I just fixed it – Isaac Ray Sep 18 '14 at 18:44
1

it worked! $('#compose-modal').show(); was not defined instead had to use this $('#compose-modal').modal('show');. Thank you so much!! Appreciate your speedy replies. – Rushabh M Shah Sep 19 '14 at 14:38
Oh, my bad about the .show(). I think I actually knew that, just a brain fart. But glad everything worked out. Happy to help. – Isaac Ray Sep 19 '14 at 14:39
how about we having something like question and answer collapse list which using your method? something like this:

moh89

Jan 29 '20 at 22:45

I'm not exactly sure what you are asking. In any case though, the specifics of the JavaScript and HTML you are using is mostly outside of the scope of this question. If you want to ask a specific question about bootstrap and show what you've done and what you're trying to do, you can post a link to the new question here and I'll take a look. – Isaac Ray Jan 31 '20 at 00:14

score 0 · Answer 2 · answered Nov 19 '15 at 11:39

0

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

answered Nov 19 '15 at 11:39

usersuperman

1

score 0 · Answer 3 · answered Sep 07 '20 at 08:08

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.

To pass dynamic data to a bootstrap modal

3 Answers3

Linked