web-dev-qa-db-fra.com

Ajax chargement des messages en double

Je voudrais commencer par m'excuser pour ce message si long, mais j’ai le sentiment que cela pourrait aider les autres, car j’ai ce problème et j’ai pensé que je pourrais aussi bien être aussi détaillé que possible.

Je rencontre un problème avec le fichier loop.php qui charge plusieurs fois le même message et j’ai essayé d’empêcher la méthode de dupliquer les messages et rien ne fonctionne. Comme vous pouvez le voir ci-dessous, je charge la fonction à publier dans la fonction ajax et je reçois un appel de succès, mais je ne suis pas sûr à l'heure actuelle si le fichier de boucle pose problème. Lorsque le site 1ère charge, il charge la 1ère série de messages, puis lorsqu'il récupère la 2ème série de messages, mais tout après est identique, son fichier en boucle est chargé, mais la requête est bloquée ou quelque chose du genre.

Aucune suggestion? Toute aide est grandement appréciée.

fichier loop.php

<div class="post-left">
<?php query_posts(array('post__not_in' => $id_merge,'posts_per_page'=>'2'));
      $do_not_duplicate = $post->ID;

 if (have_posts()) : while (have_posts()) : the_post();
 if( $post->ID == $do_not_duplicate ) continue;
 $ids[] = get_the_ID(); ?>
<div class="images-grid-page-wrapper">
<?php the_title(); ?>
</div>
<?php endwhile; endif; // End the loop. Whew. ?>
</div>


<div class="post-mid">
<?php query_posts(array('post__not_in' => $id_merge,'posts_per_page'=>'3'));
      $do_not_duplicate = $post->ID;

 if (have_posts()) : while (have_posts()) : the_post();
 if( $post->ID == $do_not_duplicate ) continue;

 $ids[] = get_the_ID(); ?>
<div class="images-grid-page-wrapper">
<?php the_title(); ?>
</div>
<?php endwhile; endif; // End the loop. Whew. ?>
</div>

functions.php

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

function wp_infinitepaginate(){
    $loopFile        = $_POST['loop_file'];
    get_template_part( $loopFile );
    exit;
}

ajax

jQuery(document).ready(function($) {
    var count = 1;
    var total = <?php echo $wp_query->max_num_pages; ?>;
    $(window).scroll(function(){
            if  ($(window).scrollTop() == $(document).height() - $(window).height()){
               if (count > total){
                    return false;
               }else{
                    loadArticle(count);
               }
               count++;
            }
    }); 

    function loadArticle(){    
            $('a#inifiniteLoader').show('fast');
            $.ajax({
                url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                type:'POST',
                data: "action=infinite_scroll&loop_file=loop", 
                success: function(html){
                    $('a#inifiniteLoader').hide('1000');
                    $("#content").append(html);    // This will be the div where our content will be loaded
                }
            });
        return false;
    }
});
ajaxpost-duplication
1
Jeremy Love

Vous avez quelques points à considérer ici.

Commençons comme le fait le navigateur.

Vous construisez le code HTML, jusqu'ici tout va bien, contenant la structure et tout ce qui concerne votre site. Aucun article n'est affiché.

La prochaine étape que votre navigateur doit effectuer consiste à appeler AJAX.

Voici les premières choses à considérer. Dans votre fonction document.ready, vous n'envoyez pas le décalage des publications à votre fonction AJAX-php. Autant que je sache à partir de votre code, vous voulez toujours afficher 5 posts lorsque la fonction est appelée.

Par conséquent, considérez ceci:

Au début, le nombre est égal à 0. Avec chaque rechargement réussi, le nombre augmente de 5. Vous devez placer cette partie dans la partie succès de votre appel AJAX. De plus, votre fonction AJAX-php doit connaître le décalage des messages à livrer.

Une autre chose à considérer est que vous pouvez avoir une autre requête sur votre site que celle de votre fonction AJAX. Donc, assurez-vous que le var total est le bon numéro, mais je n’entrerai pas plus dans le détail pour le moment et le laisserai comme vous le possédiez. Vous avez eu l'idée.

Votre Javascript devrait être comme ceci:

jQuery(document).ready(function($) {
    var count = 0;
    var total = <?php echo $wp_query->max_num_pages; ?>;
    $(window).scroll(function(){
            if ($(window).scrollTop() == $(document).height() - $(window).height()){
               if (count > total){
                    return false;
               }else{
                    loadArticle(count);
               }
            }
    }); 

    function loadArticle(count){    
            $('a#inifiniteLoader').show('fast');
            // I prefer doing the ajaxdata with an array
            var ajaxdata = { 
               'action' : 'infinite_scroll'
               'offset' : count
            }
            $.ajax({
                url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                type:'POST',
                data: ajaxdata, 
                success: function(html){
                    $('a#inifiniteLoader').hide('1000');
                    $("#content").append(html);    // This will be the div where our content will be loaded
                        count = count + 5; // Increase the number of posts that are already shown.
                }
            });
        return false;
    }
});

Comme vous pouvez le constater, j'ai créé un tableau pour ajaxdata - il est plus facile de le consulter de cette façon. J'ai également supprimé le loopfile=loop, comme vous pouvez le voir plus tard, car je ferais la réponse d'une autre manière.

Jusqu'ici tout va bien - nous devrions maintenant envisager de construire votre réponse AJAX un peu différente. Vous l'avez enregistré correctement, mais je ne le ferais pas avec le get_template_part, je ferais une autre fonction en passant les variables.

L'enregistrement de la fonction AJAX ressemblerait à ceci:

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

function wp_infinitepaginate(){
    load_ajax_results($_POST['count']);
    exit;
}

La dernière étape est la fonction réelle pour assembler votre sortie. Vous pouvez placer celui-ci n'importe où, votre functions.php ou un autre fichier. Je préfère créer un fichier ajax-functions.php qui est inclus dans mon functions.php, contenant toutes les fonctions ci-dessus (sauf le Javascript bien sûr)

<?php

    function load_ajax_results( $offset ) {
    // I use the $_POST['count'] as $offset here
?>

    <div class="post-left">
    <?php
        $args = array(
            'numberposts' => '2', // 2 Posts to show here
            'offset'      => $offset // the number of Posts to skip, given by the AJAX call
        );
        query_posts( $args ); // nothing else should be needed

        if (have_posts()) : while (have_posts()) : the_post();
        ?>
            <div class="images-grid-page-wrapper">
                <?php the_title(); ?>
            </div>
        <?php endwhile; endif; // End the loop. Whew. ?>
        <?php wp_reset_query(); // reset it ?>
    </div>


    <div class="post-mid">
    <?php 
        $offset = $offset + 2; // because we had 2 Posts before
        $args = array(
            'numberposts' => '3', // 3 Posts to show here
            'offset'      => $offset // the number of Posts to skip, given by the AJAX call
        );
        query_posts( $args ); // nothing else should be needed

        if (have_posts()) : while (have_posts()) : the_post();
        ?>
            <div class="images-grid-page-wrapper">
                <?php the_title(); ?>
            </div>
        <?php endwhile; endif; // End the loop. Whew. ?>
    </div>

<?php

    }

?>

Comme j'utilise le décalage ici, je n'ai pas à vérifier si l'un des messages a déjà été affiché auparavant.

Le problème principal que vous avez eu est que vous avez eu une erreur en pensant à la fonction AJAX. Cette fonction ne sait rien de ce qui se passe dans le navigateur. Vous devez donc lui indiquer les messages à afficher. Il s’agit d’une nouvelle instance chaque fois qu’elle est appelée - et donc les valeurs, qui ont été livrées la dernière fois, ne sont pas stockées.

Je n'ai pas testé cela sur mon installation, mais j'espère que vous avez l'idée derrière tout ça. S'il y a des erreurs, désolé, et s'il y a des questions, veuillez commenter :)

1
fischi