如何为 Wordpress WP Page-Navi 插件启用 AJAX答案

【问题标题】：How to enable AJAX for Wordpress WP Page-Navi Plugin如何为 Wordpress WP Page-Navi 插件启用 AJAX
【发布时间】：2011-07-06 11:35:20
【问题描述】：

我正在关注Pippin Williamson's tutorial，了解如何为我正在创建的kids toys site 进行 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 -->

【问题讨论】：

标签： jquery ajax wordpress

【解决方案1】：

我认为这里有几个不同的问题。首先，您的load() 函数中似乎有一个小错误。加载页面片段时，您需要传入 URL 后跟选择器，但您的字符串在 URL 和选择器之间没有空格。它应该是：

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

这应该可以解决加载缓慢和分页问题（目前它可能正在尝试解析一堆 .prodlist_container div 并感到困惑）。

至于悬停问题，我猜你已经在 $(document).ready() 上的 jQuery 中启动了这个，但是当通过 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); });
});

请记住，您现在必须在$(document).ready() 中致电pageInit()！

【讨论】：

非常感谢 JunkMyFunk 先生 - 我添加了您发现的空间，这使得分页工作并创建了一个单独的 pageinit 函数，每次触发分页链接时都会调用它。它现在运行良好。我会给你一个绿色的勾号，但直到我有 15 个声望点 :( - 非常感谢你的帮助先生。

【解决方案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);
    });
});

【讨论】：

【解决方案3】：

对我来说，图片加载速度足够快，但延迟可能是因为您正在加载 jquery 分页插件，这可能会增加几秒钟。

我认为对于胡佛问题，每次加载新页面时都需要重置事件，因为在执行 $(document).ready() 时没有加载第二页和第三页的

1,2,3 分页按钮对我来说很好用，但是 >> 停止在第二页。每次加载新页面时都需要更新该按钮中的 href，但我不知道该分页插件是如何工作的......

【讨论】：