Filling modal content using PHP and AJAX?
<p>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.</p>

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

<p>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.</p>

<p>Thanks in advance!</p>

<p>EDIT:</p>

<p><strong>jQuery/AJAX</strong></p>

<pre><code>$('#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
  $.ajax({
    url: "alerts.php",
    method: "GET",
    data: {id: ID},
    async: true,
    done: function() {
        loadModalFunction();
    }
    });
});
</code></pre>

<p><strong>PHP</strong></p>

<pre><code>&lt;?php
  if (!empty($_GET['id'])) {
    // MYSQL Query
    // Sets global variables    
  }
?&gt;
</code></pre>

<p><strong>Modal</strong></p>

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

<p>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.</p>