Call a PHP function on a Bootstrap Modal using AJAX

Question

I have a list of users echoed on my page using a PHP loop. When I click each user's name, a Bootsrap Modal pops up and display further details of the user. The links look like this.

<a href="#user"  data-toggle="modal"  data-id="{$user['id']}">UserName</a>

As you can see, I'm passing user's ID to the Bootstrap modal so that I can use it to retrieve other information of the user by calling get_user_by_id() in the Bootstrap Modal.

Modal Looks like this

<div class="modal fade" id="user">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <?php
          $user = get_user_by_id($id);
         ?>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JS code is like this

$('#user').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget)
   var id = button.data('id')
})

According to the above JS code, I have my user's ID in var id variable. But, ther's no way I can imagine how to use that value for the above PHP function as the argument.

Is there any possible way for that?

I have edited the question to be more unique about AJAX methods which most answers were based on AJAX

PS: I'm very new to PHP and Bootstrap.

You have to load modal content by ajax, php cannot use javascript values once the page is loaded. — Tom, Apr 23 '15 at 18:26
You’ll already asked this question and it’s been answered here: http://stackoverflow.com/questions/29822406/get-mysql-data-to-bootstrap-model — Martin Bean, Apr 23 '15 at 18:42
Thanks, I'll try your suggestons... anyway, I think it's not the same question I asked before. Here I am more specific of the code I've used and When I was asking the last question, I had no idea how opening a popup box. So, I did it and another problem came... Here I am... :-) Anyway, please let me know if I am violating rules here since I am new. — Tharindu Thisarasinghe, Apr 23 '15 at 18:48

score 2 · Accepted Answer · answered Apr 23 '15 at 18:37

You will want to use ajax to run the PHP. As @Tom states javascript cannot access PHP after the loading in the DOM. PHP is a server side language and can only be accessed as such.

Once you connect to the PHP through ajax you can then load the div with the content from the return. Only AFTER the content is loaded should you open the modal otherwise you will have a jumpy look of the box showing up and then content just appearing.

Basic example

$(".btn").click(function(){
    // AJAX code here.
    $.ajax(
    ....
    success: function($data){
      $('.target').html(data)
      $("#myModal").modal('show');
    }
    );
});

score 1 · Answer 2 · answered Apr 23 '15 at 18:40

In that way you want to solve this problem is not possible. Because to get data from server in PHP you must request to the server and the best probably only way is submit a form. As here you want to show your data in a modal so you need to do it asynchronously. So you can try like this-

    //keep a button to show the modal for user details
    <button class="detail" data-toggle="modal" data-target="#user_modal" data-id="<?= $user->id ?>">Detail</button>

    //and using jQuery on the click of the above button post a form to your desire url
        $(document).on("click", ".detail", function () {
            var id = $(this).data('id');
             $.ajax({
                    type: "POST",
                    url: "your/url",
                    data: { id: id},
                    success: function(data) {
   //and from data you can retrive your user details and show them in the modal

                    }});
                 });

Thanks, I must say, I have never worked on AJAX before. Could you please explain the above code a little more... I mean, what should I put in `your/url`. Any example ? — Tharindu Thisarasinghe, Apr 24 '15 at 02:07
my pleasure to explain it. :) in the url you should put the form action url, where you want to post your form. suppose, if you want to post your form in index.php file then you can put `url:"index.php"`. for more help you can follow this [tuts](http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59) — Khairul Islam, Apr 24 '15 at 04:37

score 0 · Answer 3 · answered Apr 23 '15 at 18:46

0

Bootstrap modals allow you to load a remote page and this is what you are looking for I believe...

<a href="userdata.php?uid=<?php echo $user['id']?>" data-target="#user" data-toggle="modal"  data-id="{$user['id']}">UserName</a>

Then the modal becomes:

<div class="modal fade" id="user" tabindex="-1" role="dialog" aria-labelledby="user" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"></div></div></div>

And userdata.php

<?php
$user_id = $_GET['uid'];
$user = get_user_by_id( $user_id );
?>

<div class="modal-header">
    HEADER STUFF GOES HERE
</div>

<div class="modal-body">
    USER INFO GOES HERE
</div>

<div class="modal-footer">
    MODAL FOOTER HERE
</div>

answered Apr 23 '15 at 18:46

mbeintema

308
2
10

Actually I did this. But, then I removed it because, then people can open the link in a new tab. So, then the Model will not be popup and just the remote file will be opened. That's pretty ugly... – Tharindu Thisarasinghe Apr 23 '15 at 19:06
What version of Bootstrap are you using? This exact set-up worked with version 3.2.x – mbeintema Apr 23 '15 at 19:13
I'm using 3.2.0 via CDN – Tharindu Thisarasinghe Apr 24 '15 at 02:01

score -1 · Answer 4 · answered Apr 23 '15 at 19:04

-1

Bootstrap modal has a option remote, but on Bootstrap v3.3.0 is deprecated and will be removed in v4. You can use jQuery.load. For example

$( "#some-click" ).on('click', function() {
    var userId = button.data('id'); //get user id here
    //jQuery.load set html with modal and user details by id  
    $( "#user" ).load( "/not-here.php", { id:userId });
});

answered Apr 23 '15 at 19:04

A.J.

446
3
9

[Bootstrap docs](http://getbootstrap.com/javascript/#modals-options) and [example with bootstrap](http://jsfiddle.net/koala_dev/NUCgp/918/) – A.J. Apr 23 '15 at 19:06
Actually I did this. But, then I removed it because, then people can open the link in a new tab. So, then the Model will not be popup and just the remote file will be opened. That's pretty ugly. – Tharindu Thisarasinghe Apr 23 '15 at 19:07
This work as ajax request I only give give you ways for solution. And second link on my comment give you solution with bootstrap. My example will work on 3x and 4x version because bootstrap says use jQuery.load – A.J. Apr 24 '15 at 12:21
You can use as bootstrap modal to show and send ajax request, after set content to `modal-body` – A.J. Apr 24 '15 at 12:23
OK, I'll have a look and try.. Thanks :) – Tharindu Thisarasinghe Apr 24 '15 at 12:24
http://jsfiddle.net/7yra1tkw/ I did for you example with bootstrap if you can see I put only bootstrap main div contents, other information comes from http://fiddle.jshell.net/bHmRB/51/show/. At now you can just send user id and get detailed content and all of this works on ajax. – A.J. Apr 24 '15 at 13:04

Call a PHP function on a Bootstrap Modal using AJAX

4 Answers4

Linked