CODEWITHSUNDEEP
javascriptphptwitter-bootstrap-3bootstrap-modal
Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

Call a PHP function on a Bootstrap Modal using AJAX

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.

Upvotes: 8

Views: 12419

Answers (4)

A.J.
A.J.

Reputation: 446

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 });
});

Upvotes: -1

mbeintema
mbeintema

Reputation: 318

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>

Upvotes: 0

Khairul Islam
Khairul Islam

Reputation: 1215

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

                    }});
                 });

Upvotes: 1

Cayce K
Cayce K

Reputation: 2338

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');
    }
    );
});

Upvotes: 2

Related Questions