Filling modal content using PHP and AJAX?

I want the user to be able to click on a table, and depending on the row they click on - it would fill the modal with content relating to that row (a MYSQL query), and open the modal.

I've attempted to do this like the following: - Load table content - Listen to when table is clicked on using jQuery - Use AJAX to post to the PHP file with the clicked on row's information - Execute MYSQL query using the row info - Filling the modal with the gathered content - Opening the modal

The problem I've encountered is that because it's a MYSQL statement and the function is non-blocking, the variables haven't been declared by the time the modal's started to open. Web programming isn't exactly my forte, so I'm sure I'm missing something simple.

Thanks in advance!



$('#alerts tbody').delegate('tr', 'click', function() {
  var id = $('td:eq(0)', this).text(); // Gets the ID of the row

  // PHP Method (below)

  // Passes ID through to PHP
    url: "alerts.php",
    method: "GET",
    data: {id: ID},
    async: true,
    done: function() {


  if (!empty($_GET['id'])) {
    // MYSQL Query
    // Sets global variables    


$('#info').find('.modal-title').text("Information (#" + id + ")");
$('#info').find('#modal-body-content').text("<?php echo $GLOBALS['content'];?>");

I know that the getting passing of the ID and getting of the content works, but the content isn't passed to the ID as the modal is loaded before the script initialises the global variables.



Alright, here's my implementation on this issue, it will be a bit simpler to just provide the basics and let you edit your own code accordingly.

First of all my entire modal content is a div with an id, <div id="modalcontent"> </div>

Then, suppose this button should open and populate my modal with data

<a href="#" onclick="openModal()">Open</a>

openModal() will look something like this

$.post("alerts.php", {
    id: ID
}, function(data) {//data will contain whatever alerts.php prints
document.getElementById("modalcontent").innerHTML = data;//insert data into modal
$('#my-modal').modal('toggle');//open modal

Again, there are many ways to do this. There are better ways to do this. But you should understand how something like this works, you can only get the output of the PHP file in javascript and edit your contents with javascript. You can get your data from another PHP script, which will be executed by javascript whenever you need it, but the PHP script itself can not modify the contents of your already loaded page.

Using this code and assuming alerts.php will echo "you have a notification";, <div id="modalcontent"> </div> will change to <div id="modalcontent">you have a notification</div> and then the modal will be toggled. This method also ensures the modal is only opened after the data is fetched so it's impossible for the modal to open without the data inside.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.