jquery / WordPress: apply infinite scroll effect to new content loaded via AJAX

Question

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:

1. click on a category
2. Get category ID which is stored in the REL attribute
3. Store that ID as a variable
4. Pass the variable as an argument to a loop in a different PHP file and load that section of the PHP file

The key pieces of the infinite scroll are that the script can find the following:

1. the element containing the link pointing to the next page of posts (#pageNav for the initial content and #filterPageNav for the new content)
2. The link pointing to the next page of posts (#beyondInfinity)
3. the div containing the posts
4. the posts themselves

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"&gt;&lt;/script&gt; 
<?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://&lt;?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'&gt; &raquo; </a></div>

Answer 1

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.