传递 PHP 变量 ID 以创建和获取动态模态内容

Posted 2023-02-24

【中文标题】传递 PHP 变量 ID 以创建和获取动态模态内容

【英文标题】：Passing PHP variable ID to create and fetch dynamic Modal content

【发布时间】：2017-06-06 23:33:20

【问题描述】：

我在这里尝试了几个答案，但我认为我完全迷失了解决我的问题。

因此，我正在为 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（内部服务器错误）。希望你能帮我弄清楚。

【问题讨论】：

那么，你 modal_book.php 中$postname 的值是多少（WP_Query 是什么？

$postname，这就是我使用'p' => $postID 通过我的文章帖子连接的方式。 $postID 指定了我单击的按钮的 ID。虽然我不确定我是否做得正确。这导致我出现服务器错误。至于你的问题，我看不到价值。但如果我放入同一个文件，它会拉出最新的文章帖子。

我的意思是 - 你的 php 脚本 modal_book.php 如何知道 WP_Query 类在哪里定义？

另外，了解如何检查error.log中的错误

哦，我明白了。对不起，我已经迷路了。实际上，我只是对我从这个答案中看到的脚本进行模式化，希望我能正确地做到/遵循它。 ***.com/questions/34693863/…对于error.log，我不知道在哪里看，因为我正在使用Mamp Pro。

【参考方案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 脚本，因为我在关闭时难以清除内容模态的。