title: Get Ajax to open modal, make PHP function call and place results inside the modal
body: <p>All night I have been playing with how to achieve this but can not figure it out. On click I am asking an AJAX call to open a modal and make a PHP function call. I want the results of that PHP function call to open inside the modal.</p>
  <p>I have moved the script around, tried adding it to the AJAX request itself, tried making the .show on teh script inside the PHP. I am missing something but could use some help.</p>
  <p>I know that the PHP function is being called via AJAX because in the console I will see the result. The modal however does not open on the page. <strong>The modal itself will not open</strong></p>
  <p><strong>ONCLICK CALL</strong></p>
  <pre><code>&lt;a href=&quot;javascript:void(0)&quot; class=&quot;button seated-btn&quot; onclick=&quot;toptions('+val.wait_id+')&quot; data-id=&quot;'+val.wait_id+'&quot;&gt; 
  </code></pre>
  <p><strong>AJAX CALL</strong></p>
  <pre><code>function toptions(){
          jQuery.ajax({
              type: 'post',
      url: my_ajax.ajax_url,
      data: {
      action: 'options'
              },      
      success: function (data) {
      (&quot;#myModal&quot;).show()
               ;}
          }); 
      }
  </code></pre>
  <p><strong>PHP FUNCTION</strong></p>
  <pre><code>    function options(){ 
      global $wpdb;
      global $available;
      $check_availability = $wpdb-&gt;get_results($wpdb-&gt;prepare(&quot;SELECT  `id` FROM mytablename &quot;));
      if (!empty($check_availability)){
       foreach($check_availability as $available){echo &quot;ID Number&quot; . str_repeat('&amp;nbsp;', 5) . $available-&gt;id. &quot;&lt;br&gt;\n&quot;;
          }
      }
  else {echo &quot;No Available&quot;;};
          ?&gt;
      
      &lt;!-- The Modal --&gt;
      &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
      
        &lt;!-- Modal content --&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;p&gt;Some text in the Modal..&lt;/p&gt;
        &lt;/div&gt;
      
      &lt;/div&gt;
      &lt;script&gt;
      jQuery('document').ready(function(){
      // Get the modal
      var modal = document.getElementById(&quot;myModal&quot;);
      
      // Get the button that opens the modal
      var btn = document.getElementById(&quot;myBtn&quot;);
      
      // Get the &lt;span&gt; element that closes the modal
      var span = document.getElementsByClassName(&quot;close&quot;)[0];
      
      // When the user clicks on the button, open the modal
      btn.onclick = function() {
        modal.style.display = &quot;block&quot;;
      }
      
      // When the user clicks on &lt;span&gt; (x), close the modal
      span.onclick = function() {
        modal.style.display = &quot;none&quot;;
      }
      
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = &quot;none&quot;;
        }
      } 
      });
      &lt;/script&gt;
              &lt;?php
      }
  </code></pre>
  <p><strong>THE HTML</strong></p>
  <pre><code>&lt;!-- The Modal --&gt;
  &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;p&gt; &lt;!-- HERE IS WHERE  I WANT THE PHP RESULTS TO SHOW--&gt;&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>