用Ajax在wordpress中“加载更多帖子”

我想在博客页面上创建ajax分页.. 我需要做的是最初显示5个帖子，然后点击“加载更多帖子”链接时再加载5个帖子。用Ajax在wordpress中“加载更多帖子”

下面是我使用的JavaScript：

<script> 
    jQuery(document).ready(function() { 
     // ajax pagination 
     jQuery('.nextPage a').live('click', function() { 

      // if not using wp_pagination, change this to correct ID 
      var link = jQuery(this).attr('href'); 

      // #main is the ID of the outer div wrapping your posts 
      jQuery('.blogPostsWrapper').html('<div><h2>Loading...</h2></div>'); 

      // #entries is the ID of the inner div wrapping your posts 
      jQuery('.blogPostsWrapper').load(link+' .post') 
     }); 
    }); // end ready function 
</script>

的问题是，当我点击老职位获得通过更换新的链接，我需要证明的旧帖子以及新帖...

这里是更新的jQuery代码，它启用ajax分页。现在

jQuery(document).ready(function(){ 
jQuery('.nextPage a').live('click', function(e){ 
    e.preventDefault(); 
    var link = jQuery(this).attr('href'); 
    jQuery('.blogPostsWrapper').html('Loading...'); 
    jQuery('.blogPostsWrapper').load(link+' .post'); 
    }); 
    });

唯一的问题是旧的帖子得到消除，我需要保持新老帖..

来源

2012-10-01 Himanshu Jain

下面是我用最后的代码，现在一切完美...

// Ajax Pagination 
jQuery(document).ready(function($){ 
    $('.nextPage a').live('click', function(e) { 
    e.preventDefault(); 
    $('.blogPostsWrapper').append("<div class=\"loader\">&nbsp;</div>"); 

    var link = jQuery(this).attr('href'); 

    var $content = '.blogPostsWrapper'; 
    var $nav_wrap = '.blogPaging'; 
    var $anchor = '.blogPaging .nextPage a'; 
    var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts 

    $.get(link+'', function(data){ 
    var $timestamp = new Date().getTime(); 
    var $new_content = $($content, data).wrapInner('').html(); // Grab just the content 
    $('.blogPostsWrapper .loader').remove(); 
    $next_href = $($anchor, data).attr('href'); // Get the new href 
    $($nav_wrap).before($new_content); // Append the new content 
    $('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load 
    $('.netxPage a').attr('href', $next_href); // Change the next URL 
    $('.blogPostsWrapper .blogPaging:last').remove(); // Remove the original navigation 
    }); 

    }); 
}); // end ready function

来源

2012-10-03 05:11:19

我知道你已经发布了一段时间了，但我想看看这个xhtml。 – bsoist

你能也许尝试下面的代码？这就是我如何在自己的网站上工作的原因。

取代：

jQuery('.blogPostsWrapper').load(link+' .post')

有：

$.get(link+' .post', function(data){ 
$('.blogPostsWrapper').append(data); 
});

来源

2012-10-01 12:47:56

您好德克... 我不为什么，但在页面realoding我当点击“加载更多链接”... –

嗯我认为这与.get也许有机会它： $ .get（''+ link +'.post'，function（data）{ –

嗨。我编辑了jQuery代码有点... 现在其加载页面的Ajax方式，但问题是，它正在加载包括页眉，页脚，侧边栏等完整的页面。这里是代码.. 'jQuery（document）.ready（function（$）{ $（'。nextPage a'）。live（'click'，function（e）{ \t e.preventDefault（）; var link = jQuery（this）.attr（'href'）; $获得（链路+ ''，函数（数据）{ \t \t $（ 'blogPostsWrapper'）附加（数据）; \t \t}）; \t}）; }）; //结束就绪功能' –

你应该使用jQuery append()添加新的职位，而无需使用旧的。

jQuery load()将替换您的元素中找到的数据。从jQuery的API引用：

.load() sets the HTML contents of the matched element to the returned data. This means that most uses of the method can be quite simple:

来源

2012-10-01 13:03:02 RRikesh

append is loading是用ajax而不是删除旧帖子，但它也带出了页眉，页脚等... 这里是新的jQuery代码： '// Ajax分页 jQuery（document）.ready （function）（$）{（'。nextPage a'）。live（'click'，function（e）{ e.preventDefault（）; var link = jQuery（this）.attr（'href'） ; $ .get（link +''，function（data）{（'。blogPostsWrapper'）。append（data）; }）; \t}}; }）; //结束就绪函数' –

有点偏离主题，但你实际上以错误的方式做了ajax。你不应该查询另一个页面，但是ajax请求应该触发php文件中的wordpress循环，并且只发送所需的帖子。 – RRikesh

用Ajax在wordpress中“加载更多帖子”

回答

相关问题