title: Bootstrap Modal AJAX Call Not Displaying
body: <p>I'm trying to show a modal dialog on a list of search results that are displayed in a table. When the user clicks the button to show the dialog I need to pass a value from the PHP code to the modal dialog so it can retrieve data about the record they have clicked on which will then appear in the modal dialog.</p>
  
  <p>Here's the HTML for the table of results:</p>
  
  <pre><code> &lt;tr&gt;
   &lt;td&gt;&lt;button class="btn btn-default" recid="33926"  onclick="showModal(33926)"&gt;Review&lt;/button&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Pending&lt;/td&gt;&lt;td&gt;001&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
   &lt;td&gt;&lt;button class="btn btn-default" recid="33951"  onclick="showModal(33951)"&gt;Review&lt;/button&gt;&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Pending&lt;/td&gt;&lt;td&gt;002&lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <p>Here's the Javascript that gets called when the Review button is clicked:</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
        function showModal(recid)
          {
          var xmlhttp;
          if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            }
          else
            {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          xmlhttp.onreadystatechange=function()
             {
             if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
               {
               document.getElementById("myModal").innerHTML=xmlhttp.responseText;
               }
            }
          xmlhttp.open("POST","modalInc.php",true);
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          xmlhttp.send("recid="+recid);
          return false;  // Do not follow hyperlink
          }
        &lt;/script&gt;
  </code></pre>
  
  <p>and here's the html for the modal dialog that should appear with the dynamic content:</p>
  
  <pre><code>  &lt;div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
       &lt;div class="modal-content"&gt;
         &lt;div class="modal-header"&gt;
           &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
           &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal Title&lt;/h4&gt;
         &lt;/div&gt;
         &lt;div class="modal-body"&gt;
              &lt;div id="modalContent"&gt;
  
              &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="modal-footer"&gt;
           &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Approve&lt;/button&gt;
           &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Reject&lt;/button&gt;
           &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;On Hold&lt;/button&gt;
         &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The modal dialog isn't being shown at the moment - I suspect there's the Javascript isn't calling it correctly but I can't seem to get the correct syntax for this.</p>