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>
1 Answer
Reset to default 0Open the console with F12 and check for red-colored errors like this:
What does the console say?