最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Ajax sometimes work and sometimes just don't work

programmeradmin6浏览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>

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>
Share Improve this question edited Aug 10, 2020 at 13:16 dhafagk asked Aug 10, 2020 at 12:55 dhafagkdhafagk 11 bronze badge
Add a comment  | 

1 Answer 1

Reset to default 0

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

What does the console say?

发布评论

评论列表(0)

  1. 暂无评论