0

So ive create load more posts using ajax following tutorial i found online. At first it works when there's just one button and so i create another one, and it works at first try but when i try again it just stopped working. I'm trying to just randomly edit the ajax or something that related to it, and im delete cache and refresh again and it sometimes works sometimes doesn't. I honestly doesn't know what the hell is going on, as im still new to ajax or javascript and jquery.

Anyway, here's my ajax :

    jQuery(function($){
    $('.loadmore').click(function(){
 
        var button = $(this),
            data = {
            'action': 'loadmore',
            'query': kamisaha_loadmore_param.posts,
            'page' : kamisaha_loadmore_param.current_page
        };
 
        $.ajax({
            url : kamisaha_loadmore_param.ajaxurl,
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...');
            },
            success : function( data ){
                if( data ) { 
                    button.html( 'Tampilkan Lagi <i class="fas fa-caret-down"></i>' ).prev().after(data);
                    kamisaha_loadmore_param.current_page++;
 
                    if ( kamisaha_loadmore_param.current_page == kamisaha_loadmore_param.max_page ) 
                        button.remove();
                } else {
                    button.remove();
                }
            }
        });
    });
});

jQuery(function($){
  $('.movie').click(function(){
 
    var button = $(this),
        data = {
      'action': 'loadmore_movie',
      'query': posts_movie,
      'page' : current_page_movie
    };
 
    $.ajax({
      url : kamisaha_loadmore_param.ajaxurl,
      data : data,
      type : 'POST',
      beforeSend : function ( xhr ) {
        button.text('Loading SDMASKLDJ ASLDJ ASLKJ...');
      },
      success : function( data ){
        if( data ) { 
          button.html( 'Tampilkan Lagi <i class="fas fa-caret-down"></i>' ).prev().after(data);
          current_page_movie++;
 
          if ( current_page_movie == max_page_movie ) 
            button.remove();
        } else {
          button.remove();
        }
      }
    });
  });
});

I'm sorry if my code looks terrible because i just blatantly wrapping it up together. Any help is appreciated, thank you.

EDIT : This is my function.php

function load_more_script(){

    if(!is_home() && !is_front_page()){
    global $wp_query;

    wp_register_script( 'kamisaha_loadmore', get_stylesheet_directory_uri() . '/assets/js/loadmore.js', array('jquery') );

    wp_localize_script( 'kamisaha_loadmore', 'kamisaha_loadmore_param', array(
        'ajaxurl' => admin_url('admin-ajax.php'), // WordPress AJAX
        'posts' => json_encode( $wp_query->query_vars ),
        'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
        'max_page' => $wp_query->max_num_pages
    ) );
    wp_enqueue_script( 'kamisaha_loadmore' );
    } 
}
add_action( 'wp_enqueue_scripts', 'load_more_script' );

function misha_loadmore_ajax_handler(){
 
    // prepare our arguments for the query
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
    $args['post_type'] = 'anime';
 
    // it is always better to use WP_Query but not here
    query_posts( $args );
 
    if( have_posts() ) :
 
        // run the loop
        while( have_posts() ): the_post();

            get_template_part('content', 'list'); 
 
        endwhile;
 
    endif;
    die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

function loadmore_movie(){
 
    // prepare our arguments for the query
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
    $args['post_type'] = 'anime';
    $args['meta_key'] = 'ks_type';
    $args['meta_value'] = 'Movie';
    $args['orderby'] = 'modified';
    $args['order'] = 'DESC';

    // it is always better to use WP_Query but not here
    query_posts( $args );
 
    if( have_posts() ) :
 
        // run the loop
        while( have_posts() ): the_post();

            get_template_part('content', 'list'); 
 
        endwhile;
 
    endif;
    die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore_movie', 'loadmore_movie'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore_movie', 'loadmore_movie'); // wp_ajax_nopriv_{action}

This is my first loop (which ajax is always works) :

if (have_posts()) : while(have_posts()) : the_post();
        <get_template_part('content', 'list');
      endwhile; else : echo "No results found"; endif; wp_reset_postdata(); 
      if (  $wp_query->max_num_pages > 1 )
      echo '<div class="loadmore box">Tampilkan Lagi <i class="fas fa-caret-down"></i></div>';

And this is my second loop (which Ajax sometimes don't work but it work at first try) :

    $args = array('post_type' => 'anime', 'meta_key' => 'ks_type', 'meta_value' => 'Movie', 'order' => $set_order, 'orderby' => $set_orderby, 'meta_query' => array('rating' => array('key' => 'ks_score', 'type' => 'NUMERIC'))); $q = NEW WP_Query($args); if ($q->have_posts()) : while($q->have_posts()) : $q->the_post();
    get_template_part('content', 'list');
    endwhile; else : echo "No results found"; endif; wp_reset_postdata(); 
              if (  $q->max_num_pages > 1 )
              echo '<div class="loadmore movie box">Tampilkan Lagi <i class="fas fa-caret-down"></i></div>';

<script>
var posts_movie = '<?php echo serialize( $q->query_vars ) ?>',
    current_page_movie = 1,
    max_page_movie = <?php echo $q->max_num_pages ?>
</script>
0

Open the console with F12 and check for red-colored errors like this: Alt text

What does the console say?

| improve this answer | |
  • There is no error on my console because at first it works like charm, but the when i try again, it doesn't work. And maybe i should put my php code as well so you could understand – dhafagk Aug 10 at 13:06
  • Please edit your question and add your full code to see the issue. – Rene Hermenau Aug 10 at 13:12
  • Im edited my question, please take a look – dhafagk Aug 10 at 13:17

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.