获取 Ajax 打开模态，进行 PHP 函数调用并将结果放入模态

Question

整晚我都在研究如何实现这一点，但无法弄清楚。单击我要求 AJAX 调用以打开模式并进行 PHP 函数调用。我希望 PHP 函数调用的结果在模态内打开。

我移动了脚本，尝试将其添加到 AJAX 请求本身，尝试在 PHP 中的脚本上制作 .show。我遗漏了一些东西，但需要一些帮助。

我知道 PHP 函数是通过 AJAX 调用的，因为我会在控制台中看到结果。但是，模式不会在页面上打开。 模态本身不会打开

点击调用

<a href="javascript:void(0)" class="button seated-btn" onclick="toptions('+val.wait_id+')" data-id="'+val.wait_id+'">

AJAX呼叫

function toptions(){
        jQuery.ajax({
            type: 'post',
    url: my_ajax.ajax_url,
    data: {
    action: 'options'
            },      
    success: function (data) {
    ("#myModal").show()
             ;}
        }); 
    }

PHP 函数

    function options(){ 
    global $wpdb;
    global $available;
    $check_availability = $wpdb->get_results($wpdb->prepare("SELECT  `id` FROM mytablename "));
    if (!empty($check_availability)){
     foreach($check_availability as $available){echo "ID Number" . str_repeat('&nbsp;', 5) . $available->id. "<br>\n";
        }
    }
else {echo "No Available";};
        ?>
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>
    
    </div>
    <script>
    jQuery('document').ready(function(){
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    } 
    });
    </script>
            <?php
    }

HTML

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p> <!-- HERE IS WHERE  I WANT THE PHP RESULTS TO SHOW--></p>
  </div>

</div>

Answer 1

试试下面的代码。

您需要将 id 添加到要添加来自 ajax 的 php 响应的 <p> 标签。

AJAX呼叫

    function toptions(){
            jQuery.ajax({
                type: 'post',
        url: my_ajax.ajax_url,
        data: {
        action: 'options'
                },      
        success: function (data) {
        $("#myModal").show();
        $("#my-data").html(data); //Add this line
}
            }); 
        }

HTML

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p id="my-data"> <!-- HERE IS WHERE  I WANT THE PHP RESULTS TO SHOW--></p>
  </div>

</div>

获取 Ajax 打开模态，进行 PHP 函数调用并将结果放入模态

Get Ajax to open modal, make PHP function call and place results inside the modal

php

ajax

wordpress

jquery

modal-dialog