Как включить AJAX для Wordpress WP Page-Navi плагин

Question

Я следую Обучающий курс Пиппина Уильямсона о том, как AJAX нумерация страниц в WordPress для сайта детских игрушек , который я создаю.

Используя следующий JavaScript:

jQuery(document).ready(function(){
    jQuery('.pagination_container a').live('click', function(e)  {
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('.content').fadeOut(500).load(link + '.content .prodlist_container', function() {
    jQuery('.content').fadeIn(500); });
    });
}); 

... мне удалось запустить нумерацию страниц, но возникают следующие проблемы:

• Большая задержка загрузки страниц с разбивкой по страницам (учитывая небольшой размер изображения)
• всем изображениям продукта странным образом присвоено состояние наведения (синий рисунок)
• Кнопки нумерации страниц больше не работают правильно.

Любые предложения / советы приветствуются, так как я некоторое время ходил кругами.

Вот HTML / PHP на случай, если это поможет:

<div class="content">


        <div class="breadpage_container group">

            <div id="breadcrumb_container">


            </div><!-- end breadcrumb_container -->

            <div class="pagination_container">


            </div><!-- end pagination container -->

        </div><!--end breadpage_container -->

        <div class="prodlist_container">

            <ul class="products group">

            <!-- loop to show products list -->

            <?php $args = array(
                'post_type' => 'products',
                'orderby' => 'title',
                'order' => 'DES',
                'posts_per_page' => 8,
                'paged' => get_query_var ('page'),
                'post_parent' => $parent
                ); ?>

            <?php query_posts($args); ?>

            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                <li>

                    <a href="<?php the_permalink() ?>" class="product_image">
                        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
                        <span class="overlay"></span>
                    </a>

                    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>
                    <p class="price_tag"><?php echo get_post_meta($post->ID, 'ProductPrice', true); ?></p>

                </li>   

            <?php endwhile; ?>

            <?php else :?>

                <p>There are no products to display</p>

            <?php endif; ?>


            </ul>   



        <div class="breadpage_container group" id="lower_breadpage_container">

            <div class="pagination_container">

                <?php wp_pagenavi(); ?>

                <?php wp_reset_query(); ?>                  

            </div><!-- end pagination container -->

        </div><!--end breadpage_container -->   

        </div><!-- prodlist_container -->   


</div><!-- end content -->

Answer 1

Я думаю, что здесь есть несколько разных проблем.Прежде всего, похоже, что в вашей функции load() есть небольшая ошибка.При загрузке фрагментов страницы необходимо указать URL-адрес, за которым следуют селекторы, но между строкой и селекторами в вашей строке нет пробела.Он должен выглядеть следующим образом:

jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {

Это должно решить проблему медленной загрузки и разбиения на страницы (в данный момент он, вероятно, пытается разобрать кучу .prodlist_container делений и запутывается).

Что касается проблемы при наведении курсора, то я предполагаю, что вы инициировали это в jQuery на $(document).ready(), но это не срабатывает, когда фрагмент страницы загружается через AJAX.Вам, вероятно, придется добавить материал, который у вас есть под $(document).ready(), в функцию инициации страницы и вызвать его, когда завершится load(), например:

jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {
    pageInit(); // New function with content of $(document).ready()
    jQuery('.content').fadeIn(500); });
});

Помните, у вас будетпозвонить pageInit() в $(document).ready() сейчас же!

Answer 2

Слегка измененная версия кода @ JunkMyFunk сделала мое дело:

//AJAX PAGINATION
jQuery('.wp-pagenavi a').on('click', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    jQuery('#property-results').load(link + ' #property-results', function() {
        jQuery('#property-results').fadeIn(500);
    });
});

Answer 3

Для меня фотографии загружаются достаточно быстро, но задержка может быть вызвана тем, что вы загружаете плагин jquery pagination, и это может добавить несколько дополнительных секунд.

Я думаю, что для проблемы с пылесосом вам нужно сбрасывать событие каждый раз, когда загружается новая страница, так как

2-й и 3-й страниц не загружаются при выполнении $ (document) .ready () ..

1,2,3 кнопки нумерации страниц работают нормально, но >> останавливается на второй странице. Вам нужно обновлять href в этой кнопке каждый раз, когда вы загружаете новую страницу, но я не знаю, как работает этот плагин для разбивки на страницы ...