PHP function call in Bootstrap Modal using AJAX

Question

I have a list of users selected on my page using a PHP loop. When I click each username, a Bootsrap Modal popup window appears and displays additional information about the user. The links are as follows.

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

As you can see, I pass in the user ID of the Bootstrap modality to use it to retrieve other user information by calling get_user_by_id() in the Bootstrap Modal module.

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 a user var id in var id variable. But I can not imagine how to use this value for the above PHP function as an argument.

Is there any possible way to do this?

I edited the question to be more unique in AJAX methods, most of the answers were based on AJAX

PS: I am very new to PHP and Bootstrap.

Answer 1

You want to use ajax to run PHP. Since @Tom claims that javascript cannot access PHP after loading into the DOM. PHP is a server-side language and can only be accessed as such.

Once you connect to PHP via ajax, you can load the div with the content from the return. Only AFTER the content is loaded if you open the modal, otherwise you will have a clumsy view of the window, and then the content just displayed will appear.

Basic example

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

Answer 2

So you want to solve this problem, it is not possible. Since in order to receive data from a server in PHP you have to request a server, and best of all, only a way to submit a form. As here you want to show your data in modal format, so you need to do it asynchronously. So you can try 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 }}); }); 

Answer 3

Bootstrap modifications 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 modality will be:

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

Answer 4

Bootstrap modal has a remote option, but on Bootstrap v3.3.0 it 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 }); });