infinite scroll with query_posts WordPress
- REFUNDED
Attempting to use an infinite scroll with a query on a page.
<div id="items" class="row">
<?php
$i = 1;
if ( get_query_var('paged') ) {
$paged = get_query_var('paged');
} else if ( get_query_var('page') ) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
query_posts(
array(
'showposts' => '4',
'cat' => implode(",", $cat_ids),
'paged' => $paged ) );
if ( have_posts() ) : $count = 0; while ( have_posts() ) : the_post(); $count++;
?>
<div class="item col-sm-12 col-lg-6">
...
</div>
<?php $i++; endwhile; ?>
<?php endif; ?>
</div>
Here's the script:
<script type="text/javascript">
// Ajax-fetching "Load more posts"
jQuery('.fetch a').live('click', function(e) {
e.preventDefault();
$(this).addClass('loading').text('Loading...');
$.ajax({
type: "GET",
url: $(this).attr('href') + '#items',
dataType: "html",
success: function(out) {
result = $(out).find('#items .item');
nextlink = $(out).find('.fetch a').attr('href');
$('#items').append(result).masonry('appended', result);
$('.fetch a').removeClass('loading').text('Load More Posts');
if (nextlink != undefined) {
$('.fetch a').attr('href', nextlink);
} else {
$('.fetch').remove();
}
}
});
});
</script>
When hovering over the Load More Posts, it indicates 'url-here/page/2' but it doesn't go to the next set of posts.
The two scripts I'm using are:
http://www.infinite-scroll.com
http://masonry.desandro.com
This works when using it within the regular post in index.php but when I use it within a page template, it doesn't work.
Thanks for your help.
Answers (3)
Romel Apuya answers:
got link??
Romel Apuya comments:
query_posts(
array(
'showposts' => '4',
'cat' => implode(",", $cat_ids),
'paged' => $paged ) );
if ( have_posts() ) : $count = 0; while ( have_posts() ) : the_post(); $count++;
?>
to
query_posts(
array(
'showposts' => -1,
'paged' => $paged ) );
if ( have_posts() ) : $count = 0; while ( have_posts() ) : the_post(); $count++;
?>
Justin Young comments:
Here's the development link: http://dev-guard-ready.pantheon.io/mental-test/. The 'cat' is necessary to choose the category or categories. when I add the -1 it simply shows all the posts in that category.
Romel Apuya comments:
hi,
here
[[LINK href="http://www.infinite-scroll.com/"]]http://www.infinite-scroll.com/[[/LINK]]
the plugin does not really support template file
read on FAQ
<blockquote>Why doesn’t it work on ____ page?
Currently, the plugin is disabled for everything but the main page, but I’ll work on enabling it for Archives, Categories, and Tags.</blockquote>
Reigel Gallarde answers:
let's debug it.
first, let's get rid of this javascript error. This might be causing the problem. ajax is javascript, and javascript will stop running if there's an error... attached is the console from your site... you can see this by pressing ctrl+shift+j in your chrome browser.
I'm not sure where the error came from. You have to test it. Try deactivating some plugins and look at the console if there are no javascript error.
Again, your ajax can not run if there are javascript errors in your site.
Once you've fixed that, we can start checking the backend problem if there are.
Sai kumar answers:
Hi,
Please try with the following code instead.
jQuery(document).ready(function($){
var $container = $('.col-sm-12 .row');
$container.infinitescroll ({
"nextSelector":"div.fetch a",
"navSelector":"div.fetch",
"itemSelector":"#items .item",
loading: {
img: "http://www.trenditt.com/wp-content/themes/trenditt/images/ajax-loader.gif",
msgText: "Loading the next set of posts...",
finishedMsg: "All posts loaded."
}
});
});
Please comment / or remove the existing script on your page and try the above page. It is initiating infinite scroll for me. I tried this in your page, here am sharing the test i did with your page, please check http://octopusteam.in/infintescroll-test.html
Hope this will help you. Feel free to contact me.
Many Thanks,
Sai
Justin Young comments:
Wasn't able to get this to work, unfortunately. I stripped it down on localhost to test it.
<div id="items" class="row">
<?php
$i = 1;
if ( get_query_var('paged') ) {
$paged = get_query_var('paged');
} else if ( get_query_var('page') ) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
query_posts(
array(
'showposts' => '2',
'paged' => $paged ) );
if ( have_posts() ) : $count = 0; while ( have_posts() ) : the_post(); $count++;
?>
<div class="item col-lg-12">
<?php the_title(); ?>
</div>
<?php $i++; endwhile; ?>
<?php endif; ?>
</div>
<div class="clearfix"></div>
<div class="fetch">
<?php next_posts_link( __( '<p>Load More Posts</p><span class="fa fa-plus"></span>', 'siiimple' ) ); ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
var $container = $('#items');
$container.infinitescroll ({
"nextSelector":"div.fetch a",
"navSelector":"div.fetch",
"itemSelector":"#items .item",
loading: {
img: "http://www.trenditt.com/wp-content/themes/trenditt/images/ajax-loader.gif",
msgText: "Loading the next set of posts...",
finishedMsg: "All posts loaded."
}
});
});</script>
scripts being used:
jquery.infinitescroll.min.js
It just goes to the second page, with not infinite scroll.
Thanks!
Sai kumar comments:
Hi,
Please use .col-sm-12 .row instead of #items in var container. I already mentioned that. Please check with that.
Many thanks
Sai