WordPress：Ajaxレスポンスがページ全体を上書きします

Question

最近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(); 
} 

あなたは何を私に指摘してくださいすることができ間違っている？

Answer 1

サーバーへの非同期呼び出しを行い、htmlを返します。成功すると、要素のすべての内容をid="custom_container"に置き換え、サーバーから返されたものを置き換えます。

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

あなたはおそらく、あなたが受け取ったhtmlを配置したい場所に応じて、別のセレクタで#custom_containerを置き換えたい：

はここというん概説機能です。

新しく作成されたhtmlは初期化されませんのでご注意ください。ページロード時にイベント/ビヘイビアを要素にバインドするスクリプトがある場合は、上記で説明したsuccess関数の中に新しく追加されたhtmlにイベント/ビヘイビアを追加するか、ページのロード時にジェネリックバインディングを使用する必要があります。