傳遞PHP變量ID以創建和獲取動態模式內容

Question

我在這里嘗試了幾個答案，但我想我對弄清楚我的問題完全迷失了。

因此，我正在為Book文章創建不同文章的文章列表，其中每個文章都有不同的內容要從后端提取。 為了簡化多次單擊頁面，我選擇使用Modal。 將某些Bootstrap Modal答案與我的UIKit Modal進行比較/使用后，獲得了一些紅色的信息，但它似乎無法正常工作。

這是WordPress和UIKit Modal的核心功能的混合體

代碼圖1

<a href="" class="uk-button uk-button-primary uk-width-1-1" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info',bgclose:false,center:true}"><?php echo $book_button; ?></a>

-模態觸發

<div id="book-info" class="uk-modal">
  <div class="uk-modal-dialog">
    <a class="uk-modal-close uk-close"></a>
    <div class="fetched-data">
      <!-- Content To Fetch -->
    </div>
  </div>
</div>

-模態容器

代碼圖2

$(document).ready(function(){
  $('.uk-modal').on({
    'show.uk.modal': function(){
      var postID = $(e.relatedTarget).data('content');

      $.ajax({
        type: 'post',
        url: 'wp-content/themes/mytheme/inc/structures/modal/modal-book.php',
        data: 'data='+ postID,
        success: function(data) {
          $('.fetched-data').html(data);
        }
      });
    }
  });
});

-Ajax腳本

代碼圖3

<?php
$postID = $_GET['data'];
$postname = new WP_Query([ 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $postID ]);

while ( $postname->have_posts() ) : $postname->the_post();

  the_field('content_modal_box');
  echo '<br>';
  echo $post->post_name;

endwhile;

wp_reset_postdata();

-modal-book.php文件

代碼發行1

加載資源失敗：服務器響應狀態為500（內部服務器錯誤）

這是我從控制台發出的消息，反映到我的路徑： wp-content/themes/mytheme/inc/structures/modal/modal-book.php

結論

乍一想，我不知道代碼在技術上是否通過Ajax傳遞了我的變量，而且我不確定為什么它響應為500（內部服務器錯誤）。 希望你能幫助我找出答案。

Answer 1

好的，經過一段時間調試我的全部代碼並進行了更多研究。 這是我的問題的有效解決方案。

首先，我確實意識到我傳遞的數據是“空”，這是模態結果“ 500（內部服務器錯誤）”的原因。 其次，我的Ajax“數據”也不知道我的變量值，因為它為空，因此導致錯誤。 在觸發模式打開時，沒有data-content傳遞給我的任何腳本。

解

<a href="" class="uk-button uk-button-primary uk-width-1-1 open-modal" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info'}"><?php echo $book_button; ?></a>

-修訂的模態觸發器

$('.open-modal').on('click', function(){
  var postID = $(this).attr('data-content');

  var modal = UIkit.modal(".uk-modal", {center: true, bgclose: false});

  if ( modal.isActive() ) {
    modal.hide();
  } else {
    modal.show();

    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'wp-content/themes/mytheme/inc/structures/modal/modal-donate.php',
      data: 'data='+postID,
      success: function(data) {
        $('.fetched-data').html(data);
      }
    });
  }

});

-修訂的Ajax腳本

意識到這里的所有東西之后。 一切正常，工作正常。 我修改了Ajax腳本，並在“ modal-book.php”文件上匹配了我正在使用的type函數，並將事件模式更改為模式的原始js腳本，因為在關閉模式時很難清除內容。