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響應覆蓋整個頁面

回答

相關問題