So I am trying to use jQuery infinite-scroll plugin in combination with some custom jQuery that loads a new loop from a different PHP file with AJAX. The infinite-scroll works on the initial page content, but I can't get it to work with the newly loaded content. Here's how the AJAX logic works:
The key pieces of the infinite scroll are that the script can find the following:
This may be part of the problem. The other problem might be that the $_POST['id'] call isn't being posted correctly to the various pages of the paged category posts: ("../category-filter/page/2", "../category-filter/page/3" etc)
Any insight or help very much appreciated!!!
EDIT / ADDITION 8/17:
Before I (or you) answer the question about applying the infinite scroll to the external loop with the category loaded through AJAX category__in'=>array($_POST['id']) it would certainly be easier to answer first assuming a fixed category, for example category__in'=>array(13) instead. So if anyone has any insight or answers to this simplified problem that would also be great!
Here is the JQUERY:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<?php if( is_home() ) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/spritely.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Add Loading Image
$('body').append('<div id="catFilterLoading"></div>');
$('#catFilterLoading').pan({fps: 30, speed: 1000, dir: 'right', depth: '1'});
//Filter Categories
$.ajaxSetup({cache:false});
$('#categoryContainer ul li a').click( function() {
$('#catFilterLoading').show();
//Remove the initial page navigation + the infinite scroll script
$('#pageNav, #documentInfinite').remove();
//Get the category ID, stored in the REL attr
var cat_id = $(this).attr('rel');
//Load the '#filter' div and post the cat_id to that page to be used in the new loop
$("#content").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/category-filter/ #filter",{id:cat_id}, function() {
//This is the call back function for load()
//Do this stuff once the new content has finished loading
//hide the loading graphic
$('#catFilterLoading').hide();
//apply a new infinite scroll effect to the loaded content
$('#filter').infinitescroll({
navSelector : "#filterPageNav",
nextSelector : "#beyondInfinity",
itemSelector : "#filter .post",
loadingImg : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
donetext : ""
});
});
return false;
})
});
</script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/init.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/infinite-scroll.min.js"></script>
<?php if( is_home() ) { ?>
<script id="documentInfinite" type="text/javascript">
$(document).ready(function() {
$('#content').infinitescroll({
navSelector : "#pageNav",
nextSelector : "#beyondInfinity",
itemSelector : "#content .post",
loadingImg : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
donetext : ""
});
});
</script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavHome.js"></script>
<?php } else { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/subnavPage.js"></script>
<?php } ?>
Here is the PHP template For loaded content:
<?php
/*
Template Name: categoryFilter
*/
?>
<?php
get_header();
?>
<h3 id="thinkingH3">Latest Thinking</h3>
<div id="content">
<div id="filter">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if( !is_paged() ) {
$args=array(
'category__in'=>array($_POST['id']),
'paged'=>$paged
);
} else {
$args=array(
'category__in'=>array($_POST['id']),
'paged'=>$paged
);
}
query_posts($args);
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="post <?php echo $_POST['id']; ?>">
<div class="postExcerpt">
<span class="postDateOutter"></span>
<span class="postDate"><?php the_time('m.d.Y') ?></span>
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/post.jpg" alt="post image" />
<h2><?php the_title(); ?></h2>
<?php the_advanced_excerpt(); ?>
<a class="readFull" href="#">Read Full Post</a>
</div>
<div class="postAuthor">
<?php echo get_avatar( get_the_author_email(), '120' ); ?>
<b><?php the_author(); ?></b>
<b>Comments: <?php comments_number('0', 'one', '%'); ?> </b>
<b>Thinking About</b>
<ul>
<?php swift_list_cats(7); ?>
</ul>
</div>
</div> <!-- post -->
<?php endwhile; endif; ?>
<div id="filterPageNav"><?php get_pagination(); ?></div>
</div> <!-- filter -->
</div> <!-- content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Here's the HTML output of the pagination function (removed the domain name):
<div id="pageNav"><a id='pageIndicator'>Page <span>1 <i>of</i> 4</span></a><a href='http://....com/' class='current pageNumbers'>1</a><a href='http://../page/2' class='pageNumbers'>2</a><a href='http://....com/page/3' class='pageNumbers'>3</a><a href='http://....com/page/4' class='pageNumbers'>4</a><a href="http://.../page/2" id="beyondInfinity"><i>Next</i> </a> <a href='http://.../page/4'> » </a></div>
Hard to say if I can't debug the script in my browser. You couldn't provide a test URI or set the debug property of infinitescroll to true and post the output it generates to the FireBug console?
It could have something todo with adding content with id attributes set. I don't know how the DOM behaves when there are two or more elements sharing the same id, which is supposed to be unique.
I think this should be okay for #content and #filter as they aren't really added to the DOM but all elements inside the #filter container should better only use classes or should be removed from the DOM before anything is loaded.