web-dev-qa-db-fra.com

WP_Query avec le gestionnaire ajax renvoie les mêmes messages

J'ai un problème qui me rend atm chauve. J'ai un appel ajax qui gère une boucle qui gère certaines requêtes et renvoie des messages pour moi.

Jusqu'ici tout va bien, mais la première fois que l'utilisateur voit la page, nous devons charger 10 articles, puis nous voulons cliquer sur un bouton pour en demander 5 de plus.

Jusqu'ici tout va bien.

Mais lorsque nous demandons les 5 autres messages, nous récupérons les 5 premiers messages.

Mon batchloop

<?php   
// Our include  
define('WP_USE_THEMES', false);  
require_once('../../../wp-load.php');  

// Our variables  
$posts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;  
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;  
$category = (isset($_GET['category_name'])) ? $_GET['category_name'] : 0;  

var_dump($posts);

$args = array(  
    'posts_per_page' => $posts,
    'category_name'  => $category, 
    'post_status'    => 'publish',
    'orderby'        => 'date',
    'order'          => 'DESC',
    'paged'          => $page 
);

query_posts($args);  

// $query = new WP_query($args);

// our loop  
if (have_posts()) {  

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts($args);

       while (have_posts()){  
              the_post();  

              get_template_part( 'thumbs', get_post_format() );  
       }  
} 

// unset($page, $posts, $category);

// wp_reset_postdata();
wp_reset_query();
?>

Est-ce que quelqu'un voit ce que je fais mal?

MODIFIER:

gestionnaire de lots

 function _batchhandler() { 
        var getamount = localStorage.getItem('amount'); 

        console.log('amount of posts to retrive ' + JSON.parse(getamount));

        // Ajax call
        $.ajax({
            type: 'GET',
            data: {
                posts: getamount, 
                page: page,
                category: 'work'
            },
            dataType: 'html',
            url: 'http://dev.xxx.se/wp-content/themes/xxx/batch.php',
            beforeSend: function() {
                _setHeader;
                if( page != 1 ) {
                    console.log('Loading');
                    // Show the preloader
                    $('body').prepend('<div class="preloader"><span class="rotate"></span></div>');
                }
                // If we reach the end we hide the show more button
                if( page >= total ) {
                    $('.load').hide();
                }
            },
            success: function(data) {
                console.log(page);  
                var scroll = ($('.thumb').height() * posts);
                // If thumbs exist append them
                if( data.length ) { 
                    // Append the data
                    $('#batch').append(data);

                    // Remove the crappy width and height attrs from the image * Generated by WP *
                    $('img').removeAttr('height').removeAttr('width');

                    // Animate each new object in a Nice way
                    (function _showitem() {
                        $('#batch .thumb:hidden:first').addClass('show', 80, _showitem);

                        // On the last request do load any more
                        loading = false;  
                    })();

                    // Remove the preloader
                    $('.preloader').fadeOut(200, function() {
                        $('.preloader').remove();   
                    });
                }
                // return false;
            },
            complete: function() {
                // Delete storage
                localStorage.clear();

                // Update the scroller to match the updated content length
                if (scroller)
                    setTimeout("scroller.refresh()", 300);

                // Initalize the load more button
                _clickhandler();
            },
            error: function() {
                console.log('No page found');
            }
        });
    }

et ma charge plus de fonction de bouton

 $('.load').on('click', function(event) {
            event.preventDefault(); 
            // Delete storage
            localStorage.clear();

            if(!loading) {
                loading = true;
                // Increase our pagenumber per click
                page++;
                count++;
                // Remove preloader
                $('.preloader').remove();

                setTimeout(function() {
                    $('#batch').css({
                        '-webkit-transform' : 'translateY(-' + ($('#batch li').outerHeight() * count)  + 'px)'
                    });
                }, 30);

                // Clear storage and set a new
                localStorage.setItem('amount', JSON.stringify(amount.medium));
                var getamount = localStorage.getItem('amount');

                // Send the request to the handler                  
                _batchhandler(page);    
            }      

        });

Tout semble aller pour le mieux, les 10 premiers articles (1-10) sont chargés comme il se doit, mais la première fois que vous cliquez sur "Charger plus", nous obtenons les 5 résultats suivants, mais les résultats sont des articles chargés le premier fois (5-10). Si on clique à nouveau sur "charger plus", on obtient le résultat correct

postswp-queryjqueryajax
1
Jonas

Attention, je ne peux pas vraiment tester cela pour le moment. Cependant, il y a plusieurs choses qui, à mon avis, pourraient être améliorées à partir de votre code.

D'abord, si nous lisons le codex ou quelques conseils sur l'utilisation de ajax , nous pouvons configurez une fonction de rappel ajax qui ne pointe pas vers un fichier dans lequel nous devons amorcer les fonctions de chargement de WordPress.

Je vais supposer que tout votre script est dans un fichier JS et est correctement mis en file d'attente:

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'wpa-95258-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'wpa-95258-ajax-request', 'wpa-95258-ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

En utilisant wp_localize_script, nous pouvons transmettre certaines variables à un objet de script qui sera ensuite disponible dans le script. Nous allons utiliser cela pour le paramètre URL .ajax. Nous avons également besoin d’un paramètre action, car WordPress recherchera

// this hook is fired if the current viewer is not logged in
do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );

// if logged in:
do_action( 'wp_ajax_' . $_POST['action'] );

Nous pouvons donc l'utiliser ultérieurement pour attacher une fonction de rappel à toute action ajax. J'ai tout d'abord adapté votre .ajax pour avoir une action et utiliser l'URL ajax de WordPress:

function _batchhandler() { 
    var getamount = localStorage.getItem('amount'); 

    console.log('amount of posts to retrive ' + JSON.parse(getamount));

    // Ajax call
    $.ajax({
        type: 'GET',
        data: {
            posts: getamount, 
            page: page,
            category: 'work',
            action: 'batchhandler' // use this to add a callback
        },
        dataType: 'html',
        url: wpa-95258-ajax.ajaxurl, //from localize script
        beforeSend: function() {
            _setHeader;
            if( page != 1 ) {
                console.log('Loading');
                // Show the preloader
                $('body').prepend('<div class="preloader"><span class="rotate"></span></div>');
            }
            // If we reach the end we hide the show more button
            if( page >= total ) {
                $('.load').hide();
            }
        },
        success: function(data) {
            console.log(page);  
            var scroll = ($('.thumb').height() * posts);
            // If thumbs exist append them
            if( data.length ) { 
                // Append the data
                $('#batch').append(data);

                // Remove the crappy width and height attrs from the image * Generated by WP *
                $('img').removeAttr('height').removeAttr('width');

                // Animate each new object in a Nice way
                (function _showitem() {
                    $('#batch .thumb:hidden:first').addClass('show', 80, _showitem);

                    // On the last request do load any more
                    loading = false;  
                })();

                // Remove the preloader
                $('.preloader').fadeOut(200, function() {
                    $('.preloader').remove();   
                });
            }
            // return false;
        },
        complete: function() {
            // Delete storage
            localStorage.clear();

            // Update the scroller to match the updated content length
            if (scroller)
                setTimeout("scroller.refresh()", 300);

            // Initalize the load more button
            _clickhandler();
        },
        error: function() {
            console.log('No page found');
        }
    });
}

Maintenant que nous avons un point d’attache, nous pouvons créer la fonction de rappel sans le chargeur initialisé. Je vous recommande également de vous débarrasser de query_posts(). Cela a des conséquences inutiles sur la requête et il est généralement recommandé d’utiliser new WP_Query.

J'ai ajusté votre batchloop.php pour qu'il soit une fonction de rappel:

function wp_ajax_batchhandler_callback(){

    // Our variables  
    $posts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;  
    $page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;  
    $category = (isset($_GET['category_name'])) ? $_GET['category_name'] : 0;  

    var_dump($posts);

    $args = array(  
        'posts_per_page' => $posts,
        'category_name'  => $category, 
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC',
        'paged'          => $page 
    );

    $ajax_query = new WP_query($args);

    // our loop  
    if ($ajax_query->have_posts()) {  

        while ($ajax_query->have_posts()){  
            $ajax_query->the_post();  
            get_template_part( 'thumbs', get_post_format() );  
        }  
    } 

    // unset($page, $posts, $category);

    wp_reset_postdata();

}
add_action( 'wp_ajax_nopriv_batchhandler', 'batchhandler_callback' ); //logged out users
add_action( 'wp_ajax_batchhandler', 'batchhandler_callback' ); //logged in users

Comme je l'ai dit, je n'ai pas testé cela, mais on dirait que vous utilisez:

$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;

Pour obtenir le numéro de page que vous utilisez dans la requête. Cependant, vous n'envoyez pas le numéro de page dans la fonction .ajax, je doute donc que vous obteniez une pagination correcte. Cependant, vous devriez maintenant être connecté à la manière appropriée de faire des appels ajax dans WordPress, et je pense que la pagination peut être corrigée en passant la variable pageNumber.

1
helgatheviking