传递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脚本，因为在关闭模式时很难清除内容。