And So I am attempting to use jQuery infinite-scroll wordpress plugin in conjunction with some custom jQuery that loads a brand new loop from the different PHP file with AJAX. The infinite-scroll creates the first page content, however i can't get results using the recently loaded content. Here's the way the AJAX logic works:

  1. click a category
  2. Get category ID that is saved in the REL attribute
  3. Store that ID like a variable
  4. Pass the variable being an argument to a loop inside a different PHP file and load that portion of the PHP file

The important thing bits of the infinite scroll are the script will find the next:

  1. the element that contains the hyperlink pointing to another page of posts (#pageNav for that initial content and #filterPageNav for that new content)
  2. The hyperlink pointing to another page of posts (#beyondInfinity)
  3. the div that contains the posts
  4. the posts themselves

This might be area of the problem. Another problem may be the $_Publish['id'] call is not being published properly towards the various pages from the paged category posts: ("../category-filter/page/2", "../category-filter/page/3" etc)

Any insight or help greatly appreciated!!!


Before I (or else you) answer the question about using the infinite scroll towards the exterior loop using the category loaded through AJAX category__in'=>array($_POST['id']) it might easily be simpler to reply to first presuming a set category, for instance category__in'=>array(13) rather. Therefore if anybody has any insight or solutions for this simplified problem that will be also great!

This is actually the JQUERY:

<script type="text/javascript" src=""></script> 
<?php if( is_home() ) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/assets/js/spritely.js"></script>
<script type="text/javascript">
    //Add Loading Image
    $('body').append('<div id="catFilterLoading"></div>');
    $('#catFilterLoading').pan({fps: 30, speed: 1000, dir: 'right', depth: '1'});

    //Filter Categories
    $('#categoryContainer ul li a').click( function() {
          //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

                  //apply a new infinite scroll effect to the loaded content
                navSelector  : "#filterPageNav",            
                nextSelector : "#beyondInfinity",    
                itemSelector : "#filter .post",
                loadingImg   : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
                donetext     : ""


        return false;
<?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() {
        navSelector  : "#pageNav",            
        nextSelector : "#beyondInfinity",    
        itemSelector : "#content .post",
        loadingImg   : "<?php bloginfo('stylesheet_directory'); ?>/assets/images/loading.gif",
        donetext     : ""

<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 } ?>

This is actually the PHP template For loaded content:

Template Name: categoryFilter


            <h3 id="thinkingH3">Latest Thinking</h3>

            <div id="content">
                <div id="filter">

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
if( !is_paged() ) {
} else {
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 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>
                                <?php swift_list_cats(7); ?>

                    </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 creation of the pagination function (removed the domain title):

<div id="pageNav"><a id='pageIndicator'>Page <span>1 <i>of</i> 4</span></a><a href='' class='current pageNumbers'>1</a><a href='http://../page/2' class='pageNumbers'>2</a><a href='' class='pageNumbers'>3</a><a href='' class='pageNumbers'>4</a><a href="http://.../page/2" id="beyondInfinity"><i>Next</i> </a> <a href='http://.../page/4'> &raquo; </a></div>