Question posted in
You can find the official documentation here.

Display WordPress last posts via AJAX – Jquery ajax

I am building a news blog that upload posts every hour. I have created a shortcode that displays the last 15 posts on the home page. My problem was that the server cache needed to be deleted every hour. so I’ve decided to serve the post via AJAX so this area will get the latest posts every page load.

I found this answer and combine it whit my code.

My problem is that it displays all of the posts and not just 15.

PHP:

function get_ajax_posts() {
// Query Arguments
    $args = array(
    'post_type' => array('post'),
    'post_status' => array('publish'),
    'posts_per_page'  => 15,
    'nopaging' => true,
    'order'    => 'DESC',
    'orderby'    => 'date',
    );

    $ajaxposts = new WP_Query( $args );
    $response = '';

    if ( $ajaxposts->have_posts() ) {
            while ( $ajaxposts->have_posts() ) {
                $ajaxposts->the_post();
                $response .= get_template_part( 'template-parts/content-archive');
            }
   }    else {
             $response .= get_template_part('none');
     }

    echo $response;
        exit; // leave ajax call
}

// Fire AJAX action for both logged in and non-logged in users
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

JS:

 $.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php');?>',
    dataType: "html",
    data: { action : 'get_ajax_posts' },
    success: function( response ) {
        $( '.home-hot-flights' ).html( response ); 
          //hot-flights
        var hot_flights_item = $(".home-hot-flights article").width() + 17;
        $(".art-move-left").click(function () { 
          $('.move-right').addClass('show-move-right');
          var leftPos = $('.home-hot-flights').scrollLeft();
          $(".home-hot-flights").animate({scrollLeft: leftPos - hot_flights_item}, 200);
        });

        $(".art-move-right").click(function () { 
          var leftPos = $('.home-hot-flights').scrollLeft();
          $(".home-hot-flights").animate({scrollLeft: leftPos + hot_flights_item}, 200);
        });
    }
});
Tags:

2

Answers


  1. 0

    Try this piece of code I have edit your code please see below

    function get_ajax_posts() {
// Query Arguments
$args = array(
'post_type' => array('post'),
'post_status' => array('publish'),
'posts_per_page'  => 15,
'order'    => 'DESC',
'orderby'    => 'date',
);
wp_reset_query();
$ajaxposts = new WP_Query( $args );
$response = '';

if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
            $response .= get_template_part( 'template-parts/content-archive');
        }
 }    else {
         $response .= get_template_part('none');
 }

echo $response;
    exit; // leave ajax call
}

// Fire AJAX action for both logged in and non-logged in users
  add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
  add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

    If the two loops data is overwridden then, I your first code wp_reset_query() is incorrect. If you are using WP_Query then

    wp_reset_postdata() //remove wp_reset_query() which is used for wp_query()

    should be used after the end of the WHILE loop which means that in your two loops you have to have

    wp_reset_postdata()  // use this at both loops
    Login or Signup to reply.
  2. 0

    This might help you:

    Pagination parameters

    (nopaging (boolean) – show all posts or use pagination. Default value
    is ‘false’, use paging. )

    Display all posts by disabling pagination:

    $query = new WP_Query( array( 'nopaging' => true ) );

    I think you should remove that parameter if you want to display a certain number of posts using posts_per_page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search