azerphoenix
@azerphoenix
Java Software Engineer

Почему не работает ajax загрузка?

Здравствуйте!

Использую следующий источник для созданиия ajax загрузки кастомных записей.
https://misha.blog/wordpress/ajax-pagination.html

Столкнулся с 2-мя проблемами:
1) Есть javascript, который отображает текст при клике "Читать далее"
jQuery( document ).ready(function( $ ) {
$( ".readmore_testimonial a" ).click(function() {
	  $(this).closest('.readmore_testimonial').siblings('.text_testimonial').addClass('full_testimonial');
	  $(this).closest('.readmore_testimonial').hide();
	  return false
	});

});

Он отрабатывает корректно для первоначально загруженных записей, но для записей, которые были подгружены позднее обработчик не вешается и соответственно для новых записей не отрабатывает.

2) Вторая проблема заключается в том, что имеется всего 8 записей. По умолчанию вывожу 4, а остальные должны подгружаться по ajax при клике на кнопку. При клике загружается всего 2 записи и кнопка пропадает, хотя по идее в цикле еще есть записи. Ниже представлен весь мой код:

functions.php
function true_loadmore_scripts() {
  wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );

function true_load_posts(){
 
  $args = unserialize( stripslashes( $_POST['query'] ) );
  $args['post_type'] = 'testimonial';
  $args['paged'] = $_POST['page'] + 1;
  $args['post_status'] = 'publish';
 
  query_posts( $args );
  if( have_posts() ) :
    while( have_posts() ): the_post(); ?>
 
    <?php   $image = get_field('testimonial_image');
            $size = 'testimonials';
            $thumb = $image['sizes'][ $size ];
    ?>
                        <div class="review">
                            <div class="images"><a href="#"><img src="<?php echo $thumb; ?>"></a></div>
                            <div class="text-info">
                                <div class="name"><a href="#"><?php the_field('testimonial_name');?></a></div>
                                <div class="desc">
                                    <div class="text_testimonial"><?php the_field('testimonial_text'); ?></div> 
                                    <div class="readmore_testimonial">
                                        <a>Читать полностью...</a>
                                    </div>
                                </div>
                            </div>
                        </div>

    <?php endwhile; endif; die();
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

javascript (loadmore.js)
jQuery(function($){
    $('#true_loadmore').click(function(){
        $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
        var data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        $.ajax({
            url:ajaxurl, // обработчик
            data:data, // данные
            type:'POST', // тип запроса
            success:function(data){
                if( data ) { 
                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
});

archive template
<?php 
            $args = array(
                'post_type' => 'testimonial',
                'post_status' => 'publish',
                'posts_per_page' => '4',
            );
            $my_posts = new WP_Query( $args );
            if ( $my_posts->have_posts() ) : 
            ?>
                    <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
                        <?php   $image = get_field('testimonial_image');
                                $size = 'testimonials';
                                $thumb = $image['sizes'][ $size ];
                        ?>
                        <div class="review">
                            <div class="images"><a href="#"><img src="<?php echo $thumb; ?>"></a></div>
                            <div class="text-info">
                                <div class="name"><a href="#"><?php the_field('testimonial_name');?></a></div>
                                <div class="desc">
                                    <div class="text_testimonial"><?php the_field('testimonial_text'); ?></div> 
                                    <div class="readmore_testimonial">
                                        <a>Читать полностью...</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endwhile ?>
                <?php if (  $wp_query->max_num_pages > 1 ) : ?>
                    <script>
                    var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
                    var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
                    var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
                    var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
                    </script>
                    <!-- <div id="true_loadmore">Загрузить ещё</div> -->
                    <div id="true_loadmore" class="load-more"><a>Загрузить все</a></div>
                <?php endif; ?> 
            <?php endif ?>



В чем моя ошибка? Почему кнопка пропадает после первого клика, вместо того, чтобы подгружать все записи?
Заранее спасибо за помощь)
  • Вопрос задан
  • 139 просмотров
Решения вопроса 2
@tyzberd
1 пункт
https://learn.javascript.ru/event-delegation
api.jquery.com/on
$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
Ответ написан
azerphoenix
@azerphoenix Автор вопроса
Java Software Engineer
Решил проблему с ajax пагинацией. Как оказалось в шаблоне записи я выводил через WP_Query. А ajax'ом использовал query_posts... Заменил WP_Query на query posts
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы