web-dev-qa-db-fra.com

Ajouter un défilement infini à la requête de catégorie Ajax Loaded

Mise à jour: cela a été résolu. Voir mise à jour ci-dessous.

Après quelques tutoriels en ligne différents, j'ai réussi à créer une fonction pour modifier l'affichage de mon message via Ajax en fonction d'une catégorie sélectionnée dans un menu déroulant.

J'aimerais maintenant ajouter Infinite Scroll au contenu chargé avec Ajax, et je n'arrive pas à comprendre comment faire pour cela.

J'apprécierais toutes les idées sur la façon de procéder. Merci d'avance.

Voici mes fonctions php:

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

Voici le JS que j'utilise:

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

});

Voici le filtre déroulant de catégorie:

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>
loopjqueryajaxinfinite-scroll
2
mdp8593

Mise à jour ... Voici le code final qui a fonctionné pour moi

Cela peut ne pas être parfait, mais cela semble bien fonctionner pour moi sans erreur. N'hésitez pas à ajouter des suggestions d'amélioration si vous en avez.

Code JS 

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

});

Fonctions WordPress

Veuillez noter que j'utilise ceci dans un thème enfant. Par conséquent, vous voudrez probablement utiliser le répertoire d'objet template uri au lieu de get_stylesheet_directory_uri si vous n'utilisez pas de thème enfant.

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

Code de boucle principale avec sélecteur de catégorie déroulant 

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

Fichier de boucle personnalisé (custom-loop.php)

Certaines fonctions spécifiques à un thème sont incluses ici. Vous souhaitez donc les remplacer par vos propres fonctions (ou des fonctions WordPress natives).

<?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();
?>
3
mdp8593