Question

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

所以，我正在为Book文章创建不同帖子的帖子列表，每篇文章都有不同的内容从后端拉出来。为了简化多次点击页面，我选择使用Modal。从一些Bootstrap Modal答案中得到一些信息红色，比较/使用它与我的UIKit Modal，但它似乎无法正常工作。

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

代码图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“数据”也不知道我的变量值导致错误，因为它是空的。在触发模态打开时，没有@BeforeClass public void SetUp()throws Exception { //System.setProperty("webdriver.ie.driver","D:\\jar-files\\IEDriverServer_Win32_2.39.0\\IEDriverServer.exe"); //driver = new InternetExplorerDriver(); //String firefoxlocation=System.getenv("ProgramFiles(X86)")+"\\Mozilla Firefox\\firefox.exe"; //System.setProperty("webdriver.firefox.bin", firefoxlocation); System.setProperty("webdriver.gecko.driver", driverPath+"geckodriver.exe"); driver = new FirefoxDriver(); driver.get(partnerportalurl); driver.manage().window().maximize(); String title=driver.getTitle(); System.out.println(title); }传递给我的任何脚本。

<强>解决方案

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>

- 修订了Ajax脚本

在这里实现了所有的事情。它很好，工作正常。我修改了Ajax脚本，并将我正在使用的$('.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); } }); } });函数与“modal-book.php”文件进行匹配，并将事件模态更改为模态的原始js脚本，因为我很难清除内容时关闭模态。

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

1 个答案: