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

admin管理员组

文章数量:1326513

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>

• ajax
• javascript
• jquery

Share Improve this question edited Aug 10, 2020 at 13:16 dhafagk asked Aug 10, 2020 at 12:55 dhafagkdhafagk 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

What does the console say?

本文标签： javascriptAjax sometimes work and sometimes just don39t work