Загрузить больше пользовательских сообщений на клике Ajax WordPress - PullRequest
1 голос
/ 21 июня 2019

Я пытаюсь создать кнопку «Загрузить больше», которая загружает больше пользовательских типов сообщений при клике, однако я получаю сообщение об ошибке 400 (неверный запрос). Вот код, который я использую.

// Header.php
<!doctype html>
<html <?php language_attributes(); class="no-js">
 <head>
    <!-- meta tags & links --->
    <script type="text/javascript">
      ajaxurl = <?php echo admin_url('admin-ajax.php'); ?>;

// HTML:

 <div class="project">
    <?php 
        $posts_array = array(
          'post_type' => 'project',
          'status' => 'publish',
          'order' => 'ASC',
          'posts_per_page' => -1,
          'paged' => $paged
        );
       $posts = get_posts($posts_array);
       $count = 0;
     ?>
       <?php foreach ($posts as $post) : $count++; ?>
         <div class="project">
            <php echo the_title(); ?>
         </div>
       <?php endforeach; wp_reset_query(); ?>
 </div>

 <button id="more_posts">Load More</button>

// JavaScript:

    $("#more_posts").on("click", function() {
      // When btn is pressed.
     $.ajax({
        url: ajaxurl,
        action: "more_post_ajax",
        offset: page * ppp + 1,
         ppp: ppp
      }).success(function(posts) {
        page++;
        $(".projects").append(posts);
      });
    });

// Functions.php

  function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

     $args = array(
        'post_type' => 'project',
         'status' => 'publish',
         'posts_per_page' => $ppp,
         'order' => 'ASC',
         'offset' => $offset,
     );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post(); 
       the_title();
    }

     exit; 
  }

add_action ('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action ('wp_ajax_more_post_ajax', 'more_post_ajax');

1 Ответ

0 голосов
/ 22 июня 2019

Здесь есть много исправлений.

Ваш Ajax синтаксис немного выключен. Кроме того, вы можете указать количество постов на страницу для возврата с помощью PHP, поэтому вам не нужно отправлять это, вы можете оставить свой атрибут страницы во внешнем интерфейсе.

$("#more_posts").on("click", function(e) {


     $.ajax({
        // use the ajax object url
        url: ajax_object.ajax_url,
        data: {
        action: "more_post_ajax", // add your action to the data object
        offset: page * 4 //  page # x your default posts per page
        },
        success: function(data) {
         // add the posts to the container and add to your page count
         page++;
         $('.projects').append(data);

        },
        error: function(data) {
         // test to see what you get back on error
         console.log(data);
        }
     });

});

Для вашей начальной функции PHP вы должны указать только количество сообщений, которые вы хотите показать вначале . Если вы используете -1, он просто покажет все сообщения в начале, что вам не нужно. Вам также не нужно использовать параметр paged. Вам нужны только смещения.

<?php 
        $args = array(
          'post_type' => 'project',
          'status' => 'publish',
          'order' => 'ASC',
          'posts_per_page' => 4,
        );
       $posts = new WP_Query($args);
?>

<div class="projects">

   <?php
   while ($posts->have_posts()) {
       $posts->the_post(); ?>

   <div class="project">
    <?php the_title(); ?>
   </div>

   <?php
   wp_reset_postdata();
    }; ?>

</div>

Для работы с дополнительными сообщениями вам нужно только указать смещение, и вы можете добавить свои дополнительные сообщения прямо в этой функции.

function more_post_ajax(){
    $offset = $_POST["offset"];


     $args = array(
        'post_type' => 'project',
         'status' => 'publish',
         'posts_per_page' => 4,
         'order' => 'ASC',
         'offset' => $offset,
     );

    $post = new WP_Query($args);
    while ($post->have_posts()) { $post->the_post(); 
       <div class="project">the_title();</div>
    }

   wp_reset_postdata();

     die(); // use die instead of exit 
  }

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

Я не проверял это, но это должно приблизить вас к рабочему набору.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...