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 ЧАСТЬ

(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); 
     }, 
     ... 

Вы, вероятно, хотите, чтобы заменить #custom_container с другой селектор, в зависимости от того, где вы хотите разместить полученный html.

Обратите внимание, что созданный html не будет инициализирован. Если у вас есть сценарии, связывающие события/поведение с элементами загрузки страницы, вам нужно будет добавить события/поведение к вашему недавно добавленному html внутри функции success, описанной выше, или вам понадобится использовать общие привязки при загрузке страницы.