2

Update: This has been resolved. See update below.

Following a few different online tutorials, I've managed to create a function to modify my post display via Ajax based on a category selected from a drop-down menu.

I'd now like to add Infinite Scroll to the Ajax loaded content, and I can't seem to figure out what to do for that.

I would appreciate any ideas on how to proceed. Thanks in advance.

Here are my php functions:

function ajax_filter_posts_scripts() {
    // Register and enqueue script
    wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
    wp_enqueue_script('afp_script');

    // localize script
    wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), 
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
    ));
}

add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

function wp_infinitepaginate() {
    // Verify nonce
    $nonce = $_POST['afp_nonce'];   
    if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, 'afp_nonce' ) )
        die ( 'Permission denied');

    if (is_front_page()) { 
        $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    } else {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    }
    $cat = $_POST['val'];
    $args = array(
        'category_name' => $cat,
        'post_status' => 'publish',
        'posts_per_page' => '4',
        'paged' => $paged,
    );

    query_posts($args);
    get_template_part('custom-loop');

    exit;
}

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

Here is the JS I'm using:

jQuery(document).ready(function($) {

    jQuery("#la-chooser").change(function() {
        loadArticlebyCat(this.value);
    });

    function loadArticlebyCat(cat){

        data = {
            action: 'infinite_scroll', 
            val: cat,
            afp_nonce: afp_vars.afp_nonce,
        };

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:'post',
            data: data,
            success: function( data, textStatus, XMLHttpRequest ) {
                jQuery("#tb-ajax-content").html( data );
                console.log( textStatus );
                console.log( XMLHttpRequest );
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );
                jQuery("#tb-ajax-content").html( 'No posts found' );
            }
        });

        return false;
    }

});

Here's the category drop-down filter:

Filter by Category: <select id="la-chooser" style="padding:5px 10px;margin-left:5px;">
    <option value="">All Categories</option>
        <?php
            $categories =  get_categories();
            foreach ($categories as $category) {
                $option = '<option value="'.$category->category_nicename.'">';
                $option .= $category->cat_name;
                $option .= '</option>'."\n";
                echo $option;
            }
        ?>
</select>
3

Update ... Here's the Final Code That Worked for Me

This may not be perfect, but it seems to be working well for me with no errors. Feel free to add any suggestions for improvement if you have any.

JS Code

jQuery(document).ready(function($) {

    var count = 2;

    jQuery("#la-chooser").change(function() {
        loadArticlebyCat(this.value);
    });

    function loadArticlebyCat(cat){

        data = {
            action: 'infinite_scroll', 
            val: cat,
            afp_nonce: afp_vars.afp_nonce,
        };

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:'post',
            data: data,
            success: function( data, textStatus, XMLHttpRequest ) {
                jQuery("#tb-ajax-content").html( data );
                jQuery('#infinitBtn span').html('Load More Entries');
                console.log( textStatus );
                console.log( XMLHttpRequest );
                count = 2;
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );
                jQuery("#tb-ajax-content").html( 'No posts found' );
            }
        });

        return false;
    }

    jQuery('#infinitBtn').click(function(){
        loadArticle(count);
        count++;
        return false;
    });

    function loadArticle(pageNumber) {

        var cat = jQuery("#la-chooser").val();

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:'POST',
            data: "action=infinite_scroll&page_no="+ pageNumber + "&loop_file=loop&val="+ cat +"&afp_nonce="+afp_vars.afp_nonce,
            success: function(html) {
                if(html=="") {
                    jQuery('#infinitBtn span').html('All Entries Loaded');
                } else {
                    jQuery('#infinitBtn span').html('Load More Entries');
                }
                jQuery("#tb-ajax-content").append(html);
            }
        });

        return false;
    }

});

WordPress Functions

Please note I'm using this in a child theme, so you would likely want to use get template directory uri instead of get_stylesheet_directory_uri if you're not using a child theme.

function ajax_filter_posts_scripts() {

    // Register and enqueue script
    wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
    wp_enqueue_script('afp_script');

    // localize script
    wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), 
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
    ));

}

add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

function wp_infinitepaginate() {

    // Verify nonce
    $nonce = $_POST['afp_nonce'];   
    if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, 'afp_nonce' ) )
        die ( 'Permission denied');

    $paged = $_POST['page_no'];
    $cat = $_POST['val'];
    $args = array(
        'category_name' => $cat,
        'post_status' => 'publish',
        'posts_per_page' => '6',
        'paged' => $paged,
    );

    query_posts($args);
    get_template_part('custom-loop');
    wp_reset_query();

    exit;
}

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

Main Loop Code With Drop-Down Category Selector

<div class="latest-article-chooser clearfix">
    <h1>Latest Blog Posts</h1>
    <p>
        <span>Filter Posts by Category:</span> <select id="la-chooser">
            <option value="">All Categories</option>
                <?php
                    $categories =  get_categories();
                    foreach ($categories as $category) {
                        $option = '<option value="'.$category->category_nicename.'">';
                        $option .= $category->cat_name;
                        $option .= ' ('.$category->count.')';
                        $option .= '</option>'."\n";
                        echo $option;
                    }
                ?>
        </select>
    </p>
</div>

<div id="tb-ajax-content">

<?php
    if (is_front_page()) { 
        $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    } else {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    }
    $count = 1;
    query_posts(array(
        'post_status' => 'publish',
        'posts_per_page' => '6',
        'paged' => $paged,
    ));

    get_template_part('custom-loop');
?>

</div>

<div class="post-clear"></div>

<a class="button sc blue" href="#" id="infinitBtn"><span>Load More Entries</span></a>

Custom Loop File (custom-loop.php)

There are some theme-specific functions included here so you'd want to replace them with your own functions (or native WordPress functions).

<?php 
    $count = 1;
    if ( have_posts() ) : while ( have_posts() ) : the_post(); 
?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">

        <div class="entry-wrap">

            <div class="entry-media">
                <?php 
                    if ( tb_option('medium_thumb') ) { 
                        themebeagle_medium_thumbnail(); 
                    } else {
                        themebeagle_large_thumbnail(); 
                    }
                ?>
            </div>

            <div class="entry-container">

                <header class="entry-header">
                    <?php 
                        themebeagle_entry_title();
                        themebeagle_entry_meta(); 
                    ?>
                </header><!-- .entry-header -->

                <div class="entry-content" itemprop="text">
                    <?php themebeagle_excerpt(); ?>
                </div><!-- .entry-content -->

            </div> <!-- .entry-container -->

            <footer class="entry-footer">
                <?php themebeagle_entry_meta_bottom(); ?>
            </footer><!-- .entry-footer -->

        </div> <!-- .entry-wrap -->

    </article> <!-- article.post -->

<?php 
    $count = $count + 1; 
    endwhile; 
    endif; 
    wp_reset_query();
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.