WordPress：Ajax响应覆盖整个页面

我最近开始使用WordPress，并在Ajax上做了一个小教程。WordPress：Ajax响应覆盖整个页面

目前，我正在尝试检索帖子的内容，然后在另一个div（使用短代码创建）的相同页面上显示它们。除了响应显示在整个页面上并且不显示在选定的div中之外，一切正常，因此清除了其他内容。

请在下面找到我写的代码的片段：

////CREATING SHORT CODES 
     public function posts_callback($atts = null, $content = null) { 
     $args = array("post_type" => "post", "orderby" => "date", "order" => "DESC", "post_status" => "publish"); 
     $posts = new WP_Query($args); 
     ?> 
     <div style ="text-align: center" > 
      <?php 
      if ($posts->have_posts()): 
       while ($posts->have_posts()): 
        $posts->the_post(); 
        $link = admin_url('admin-ajax.php?action=post_content&post_id='.get_the_ID()); 
        ?> 
        <div id="posts_callback_div" style="display: inline-block; width: 300px; border-color: #333; border-style: solid; border-width: 2px; margin-top: 15px;">   
         <a class='short_code_link' data-post-id='<?php echo get_the_ID() ?>' href='<?php echo $link ?>' > 
          <?php echo get_the_title(); ?> 
         </a> 
        </div> 
        <?php 
       endwhile; 
      else: 
       echo ""; 
       die(); 
      endif; 
      ?> 
     </div> 
     <?php 
    } 

    public function custom_container_shortCode() { 
     ?> 
     <div class="custom_container" id="custom_container" style="width: 300px; border-color: #333; border-style: solid; border-width: 2px; margin-top: 15px;"> 
      Hi, if you can still see me then the ajax is not working! 
     </div> 
     <?php 
    }

// JQUERY PART

(function ($) { 
    'use strict'; 
    $(".short_code_link").click(function (e) { 
     e.preventDefault(); 
     postID = jQuery(this).attr("data-post-id"); 
     jQuery.ajax({ 
      type: "GET", 
      url: myAjax.ajaxurl, 
      // dataType: "html", 
      cache: false, 
      data: { 
       action: "post_content", 
       post_id: postID, 
      }, 
      success: function (response) { 
       jQuery("#custom_container").html(response); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); 
       alert("Error: " + errorThrown); 
      } 
     }); 
    }); 
})(jQuery);

// PHP处理程序

//CREATING AJAX API TO RETRIEVE POST CONTENT 
public function post_content() { 
    $post_id  = $_GET["post_id"]; 
    $content_post = get_post($post_id); 
    $content  = $content_post->post_content; 
    $content  = apply_filters('the_content', $content); 
    $content  = str_replace(']]>', ']]$gt', $content); 
    echo $content; 
    die(); 
}

能否请您指出我我做错了吗？

来源

2016-12-09 Avinash Lingaloo

您对服务器进行异步调用并返回一些html。一旦成功，您将用服务器返回的任何内容替换id="custom_container"中的元素的所有内容。

这里的概述功能，确实是：

 ... 
     success: function (response) { 
      jQuery("#custom_container").html(response); 
     }, 
     ...

你可能想用另一个选择更换#custom_container，这取决于你要放置收到html。

请注意，新创建的html不会被初始化。如果您有任何脚本绑定页面加载元素的事件/行为，则需要将事件/行为添加到上面列出的success函数中新添加的html，或者您需要在加载页面时使用通用绑定。

来源

2016-12-09 14:41:42

谢谢。我只想替换#custom_container中的内容。但是整个页面正在被响应取代，我不明白为什么。因此，我的问题是要明白为什么会这样。您能否请您详细说明活动/行为部分？ –

在这种情况下，只记得一个选项：您可能有两个元素的id为“custom_container”，并且只有第一个遇到的DOM树（父级）被首先替换。第二个永远不会被解析，因为它被删除。请检查。 –

感谢您的输入。我实际上使用wordpress样板文件，并将ajax jquery函数插入到已包含另一个ajax函数的相同管理脚本文件中。这是不正确的;我应该在另一个脚本文件中创建并排入第二个ajax函数吗？或者这不影响它？此外，这个ID只有一个元素。 –

WordPress：Ajax响应覆盖整个页面

回答

相关问题