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

IT技术

更新时间：2025-03-174

admin管理员组
文章数量:1327323

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 asked Aug 10, 2020 at 12:55 dhafagk 11 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

版权声明：本文标题：javascript - Ajax sometimes work and sometimes just don't work 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742200472a2431866.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

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

1 Answer 1

更多相关文章