将加载AJAX的帖子添加到现有帖子

时间：2015-04-06 作者：Lifestohack

我设法让Ajax加载到wordpress帖子。但我的问题是，当我单击“下一篇帖子”按钮时，它会用新帖子替换上一篇帖子。但我想在已经显示但不替换的帖子下面显示下一组帖子。

直到现在。

<div id="content">
<div id="contentInner">
<ul class="list-group">
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- the title, the content etc.. -->
<?php get_template_part( \'content\', get_post_format() );?>
<?php endwhile; ?>
<!-- pagination -->
<ul id=\'Pagination\'>
  <li>< ?php next_posts_link(\'NEXT &raquo;\') ?></li>
</ul>
<?php else : ?>
<!-- No posts found -->
<?php get_template_part( \'content\', \'none\' );
endif; ?>
</ul>
</div> 
</div>
还有剧本。

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on(\'click\',\'#Pagination a\', function(e){
e.preventDefault();
var link = jQuery(this).attr(\'href\');
jQuery(\'#content\').html(\'Loading...\');
jQuery(\'#content\').load(link+\' #contentInner\');
});
});</script>

1 个回复
SO网友:JoshuaDoshua

jQuery.html 和.load() 正在替换整个内容。

首先，移动#Pagination 在ul.list-group. 您将希望它继续保持在列表的底部。

接下来，需要重新配置jQuery ajax，以不同的方式加载帖子。您应该从下一页加载帖子，并将其附加到列表中。

未经测试，但按照这些思路应该可以做到。

jQuery(\'#Pagination a\').on(\'click\', function(e) {
    e.preventDefault();
    var link = jQuery(this).attr(\'href\');
    var loading = jQuery(\'Loading\');
    jQuery(\'.list-group\').append(loading);
    $.ajax({
        url: link,
        success: function(data) {
            var newPosts = data.find(\'#contentInner .list-group\').html();
            $(\'#contentInner .list-group\').append(newPosts);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(errorThrown);
            $(\'#loading\').text("Error loading posts");
        }
    });
});
您还可以考虑更改分页的工作方式。是数字分页吗？还是上一个/下一个？

您可以更改href 在分页链接上使用data.find 在success 函数获取href 该页上的分页。无论是哪种方式，一旦你开始使用它，它似乎会出现一些用户体验问题。

结束
标签： ajax   小码农  

相关推荐

AJAX调用中的WordPress Add_action()问题

经过一天的努力，我终于找到了解决问题的办法，但我不知道我到底犯了什么错误。请就我的问题给出您宝贵的答案，如果您无法回答，请谦虚地请求不要阻止。因此，我正在WordPress中尝试Ajax调用，并遇到了一个问题“致命错误：调用C:\\xampp\\htdocs\\brandcart\\wp content\\themes\\twenten\\functions.php中未定义的函数add\\u action（），第51行”WordPress:4.1.1主题：210这是我的代码：在210页中。php<i