0

I have a problem with ajax load more for my CustomPostType. I think i have mistake but don't know where. If it possible to edit my code, i will happy.

UPDATE

I have create div cool to paste in it loaded more post. After clicking load more i have 0 in div cool. What does it mean?

In functions.php

    add_shortcode( 'list-posts-basic', 'rmcc_post_listing_shortcode1' );

function rmcc_post_listing_shortcode1( $atts ) {
    ob_start();
    $query = new WP_Query( array(
        'post_type' => 'imggal',
        'order' => 'ASC',
        'orderby' => 'title',
        'posts_per_page' => 1,
    ) );


    if ( $query->have_posts() ) { ?>
        <ul id="ajaxx" class="clothes-listing">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
            <?php endwhile;
            wp_reset_postdata(); ?>
            <div id="cool"></div>
            <a id="more_posts" href="#">Load More</a>
        </ul>
    <?php $myvariable = ob_get_clean();
    return $myvariable;
    }
}

add_action('wp_ajax_nopriv_rmcc_post_listing_shortcode1', 'rmcc_post_listing_shortcode1'); 
add_action('wp_ajax_rmcc_post_listing_shortcode1', 'rmcc_post_listing_shortcode1');

AJAX

   (function($) {  
$(document).ready(function($) {   
    $("#more_posts").on("click",function(e){ // When btn is pressed.
    e.preventDefault();


        $.ajax({  
        url: ajax_object.ajax_url,  
        data: {  
              'action' : 'rmcc_post_listing_shortcode1'  
          },   
        success: function (data) {  
              if (data.length > 0) {  
                $('#cool').html(data);  
              }
          },
      });

   });

   });    
})(jQuery);

Please help me!

  • "I think I have problem". Can you at least try and explain what the problem is - is debugging enabled? Do you get any server-side errors? Do you get any client-side errors (in your browser console)? No-one is going to make the effort of setting up a local install & running & testing your code if you're not going to make any effort when asking your question. – TheDeadMedic May 12 '16 at 11:08
  • The problem is one - posts not loaded. no errors. nothing. Can you help me to write ajax function? look edit – Александр May 12 '16 at 11:58
  • 2
    Multiple notes: You only return the if case from rmcc_post_listing_shortcode1(), while you might want to return a fail state as well. The same goes for your JS AJAX request. You only have a success function and even in there you only return anything in case you have something inside data. You might want to extend your whole return policy. – kaiser May 12 '16 at 12:17
1

This will (*should) fix your first problem:

function rmcc_post_listing_shortcode1( $atts ) {
    // No need for output buffering - AJAX handlers should ECHO their response
    // ob_start();

    // ..

    // So long, farewell
    // $myvariable = ob_get_clean();
    // return $myvariable;

    // Now terminate
    exit;
}

Your second problem is that you are not implementing any kind of pagination/increment in your AJAX handler - "load more" will always load the same post.

0

Your first problem is that your AJAX function in functions.php should echo its results, not return. You also need a call to wp_die() at the end.

I'm not completely sure what you are trying to do but it looks like half of your loop probably shouldn't be there. Currently you are outputing the whole #ajaxx list inside itself every time you click #load-more. Which at the very least will give you problems with duplicate IDs.

I suspect what you want is:

whatever-page-template.php

// Rest of page template and beginning of loop

<ul id="ajaxx" class="clothes-listing">

    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile;
    wp_reset_postdata(); ?>

    <div id="cool"></div>
    <a id="more_posts" href="#">Load More</a>
</ul>

// etc...

functions.php

function rmcc_post_listing_shortcode1( $atts )
{
    ob_start();

    $query = new WP_Query( array(
        'post_type' => 'imggal',
        'order' => 'ASC',
        'orderby' => 'title',
        'posts_per_page' => 1,
    ));

    if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
        <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>
    <?php endwhile; endif;
    wp_reset_postdata();

    $myvariable = ob_get_clean();
    echo $myvariable;

    wp_die();
}

You are also always loading the same post so you need to implement some kind of pagination, but I would get the basic AJAX call fixed first!

You can read more about AJAX in Wordpress (including debugging!) here:

-1

You should consider giving the Ajax Load More WordPress plugin a try. https://wordpress.org/plugins/ajax-load-more/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.