Я создаю сайт в WordPress, который будет отображать две строки изображений в начале, затем по нажатию кнопки, еще две, динамически.
У меня есть четыре файла, вовлеченных в этот процесс:
/*************/
// load-more.js
/*************/
jQuery(function($){
$('#loadmore').click(function(){
var column_width = $(this).data('column-width');
var max_num_pages = $(this).data('max-num-pages');
var ignore = $(this).data('featured');
var post_type = $(this).data('type');
var button = $(this),
data = {
action:'loadmore',
query: loadmore_params.posts,
page : loadmore_params.current_page,
security : loadmore_params.security
};
$.ajax({
url : loadmore_params.ajaxurl,
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...');
console.log ("before sending ajax"); // works
},
success : function( data ){
if( data ) {
console.log("test")
button.text( 'Load More' ).prev().before(data); // insert new posts
loadmore_params.current_page++;
// where to insert new posts...
console.log("now inserting new posts");
$('.case-studies-container').find('.case-card').last().after( data );
console.log("found card");
// if it's the last page in the query, remove the button
if ( loadmore_params.current_page == max_num_pages )
button.remove();
console.log (data);
} else {
// if no data, remove the button as well
button.remove();
}
},
error : function(error){
console.log(error);
}
});
});
});
<!-- In case-study-card.php -->
<div class="case-card" >
<div class="case-card__wrapper">
<h4 class="case-card__title">
Title
</h4>
</div>
</div>
<!-- in home.php
* After looping through and displaying the initial 5 cards, display the button at the bottom
-->
<?php
if ($the_query->found_posts > 5 ){
echo "<div class='case-study__loadmore'><a id='loadmore'>Load more</a>";
}
?>
<!-- ajax-loaders.php -->
<?php
function ajax_handler(){
check_ajax_referer('load_more', 'security');
//prepare arguments for query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
$args['post__not_in'] = explode(',',$_POST['exclude']);
$args['max_num_pages'] = $_POST['max_num_pages'];
$cols = $_POST['columns'];
$type = $_POST['post_type'];
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();
endwhile;
endif;
die;
}
add_action('wp_ajax_loadmore', 'ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'ajax_handler'); // wp_ajax_nopriv_{action}
?>
Я верю, что все после success : function( data ) в load-more.js не работает, и я не уверен, почему? Я также получаю ошибку admin-ajax.php 400 (Bad Request) , файл, который я не видел или не работал в этом проекте ...
Edit:
актив-loader.php
wp_localize_script( 'theme', 'loadmore_params', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'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,
'security' => wp_create_nonce("load_more")
) );
wp_localize_script( 'theme', 'repeater_loadmore_params', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages,
'security' => wp_create_nonce("repeater_field_nonce")
) );
Редактировать 2:
Я считаю, что обработчик ajax url : loadmore_params.ajaxurl работает.
- Когда у меня есть
url : loadmore_params.ajaxurl текст кнопки меняется с «Загрузить еще» на «Загрузка».
- Когда у меня
url : ajaxurl кнопка не меняется beforeSend.
Что заставляет меня думать, что обработчик работает нормально, но что-то в success : function( data ){ не работает, и я не уверен, почему.