title: How to send an ID through AJAX to a PHP file and display the result in a Bootstrap Modal
body: <p>I have a table where the rows are displayed dynamically based on the database records. </p>
  
  <p>What I am trying to do is that when I click on one of the rows that it loads the Bootstrap modal with all of the information from the database for that specific record.</p>
  
  <p>This is the code for each row that gets displayed and when I click it it displays the modal but the modal is empty without any data.</p>
  
  <p><strong>Initial file</strong></p>
  
  <p><code>&lt;tr class="issuesTable push" data-toggle="modal" data-target="#myModal" &lt;?php echo "id='" . $row['Issue_ID'] . "'"; ?&gt; &gt;</code></p>
  
  <p>So I am trying to take this dynamic ID value and pass it to a file named <strong>issueDisplayModal.php</strong> to make the query and then display the details on the modal. Here is the query in the other file.</p>
  
  <p><strong>code that should receive the ID</strong></p>
  
  <pre><code>$issueID = $_POST['record_id']
  issueQue ="SELECT * FROM Issues WHERE Issue_ID = $issueID";
  $result = $my_dbhandle-&gt;query($issueQue);
  $numResults = $result-&gt;num_rows;
  </code></pre>
  
  <p>After this I do a series of echoes to print out the information on the modal which I got working (thankfully!).</p>
  
  <p>This is the JQuery code that I'm trying to get to work to send the HTTP request to display the issueDisplayModal.php code on the modal based on the ID that I send it.</p>
  
  <p><strong>AJAX that should call the file and send the ID variable</strong></p>
  
  <pre><code>$('#myModal').on('show.bs.modal', function (e) {
     var $invoker = $(e.relatedTarget);
     var issue_id = $invoker.attr('id');
  
     $.ajax({
        type : 'post',
         url : 'issueDisplayModal.php', // in here you should put your query 
        data : 'post_id='+ issue_id, // here you pass your id via ajax .
                   // in php you should use $_POST['post_id'] to get this value 
     success : function(r)
         {
            // now you can show output in your modal 
           $('#mymodal').show();  // put your modal id 
           $('.something').show().html(r);
         }
     });
  
  })
  </code></pre>
  
  <p>This is the modal that should display the result from <strong>issueDisplayModal.php</strong></p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Issue Details:&lt;/h4&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-body"&gt;
  
          &lt;div class="something"&gt;
  
           **results should be displayed here**
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Create Task&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>