2017-10-14 1 views
2

Sur ma page d'accueil, j'ai un bouton de chargement plus qui apparaît après tous les 15 messages. Cela fonctionne parfaitement, le bouton charger plus apparaîtra toujours s'il n'y a plus rien à charger. Quand il ne reste plus rien à charger, il me suffit d'appuyer une fois sur le bouton pour qu'il disparaisse. Mais je préférerais que le bouton de chargement ne s'affiche pas du tout s'il n'y a plus de messages à charger. Est-ce que quelqu'un a des idées sur la façon dont je pourrais résoudre ce problème.Masquer le bouton de chargement plus s'il n'y a pas de messages à charger

mon avant-page.php

<?php 
 

 
get_header(); 
 
get_template_part ('post-template/trendingg'); 
 
?> 
 

 

 

 
<script> 
 
    var now=2; // when click start in page 2 
 

 
    jQuery(document).on('click', '#load_more_btn', function() { 
 

 
     jQuery.ajax({ 
 
      type: "POST", 
 
      url: "<?php echo get_site_url(); ?>/wp-admin/admin-ajax.php", 
 
      data: { 
 
       action: 'my_load_more_function', // the name of the function in functions.php 
 
       paged: now, // set the page to get the ajax request 
 
       posts_per_page: 15 //number of post to get (use 1 for testing) 
 
      }, 
 
      success: function (data) { 
 

 
      if(data!=0){ 
 
       jQuery("#ajax").append(data); // put the content into ajax container 
 
       now=now+1; // add 1 to next page 
 
      }else{ 
 
       jQuery("#load_more_btn").hide(); 
 
      } 
 
      }, 
 
      error: function (errorThrown) { 
 
       alert(errorThrown); // only for debuggin 
 
      } 
 
     }); 
 
    }); 
 
</script> 
 

 
<section id="ajax"><!-- i have to change div to section, maybe a extra div declare --> 
 
<?php 
 

 
$the_query = new WP_Query([ 
 
    'posts_per_page' => 15, // i use 1 for testing 
 
     'orderby' => 'post_date', 
 
'order' => 'DESC', 
 
    'paged' => get_query_var('paged', 1) //page number 1 on load 
 
]); 
 

 
if ($the_query->have_posts()) { 
 

 
     $i = 0; 
 
     $j = 0; 
 
     while ($the_query->have_posts()) { 
 
      $the_query->the_post(); 
 

 
      if ($i % 5 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
 
       <div class="row"> 
 
        <article <?php post_class('col-sm-12 col-md-12'); ?>> 
 
         <div class="large-front-container"> 
 
          <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a> 
 
         </div> 
 
         <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
 
         <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
         <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
         <div class="front-page-post-info"> 
 
          <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
          <?php get_template_part('includes/front-shop-the-post'); ?> 
 
          <?php get_template_part('includes/share-buttons'); ?> 
 
          <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
         </div> 
 
        </article> 
 
       </div> 
 
      <?php } else { // Small posts ?> 
 
       <?php if($j % 2 === 0){ echo '<div class="row">';} ?> 
 
       <article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
        <div class="two-front-container"> 
 
         <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
        <div class="front-page-post-info"> 
 
         <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
         <?php get_template_part('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/share-buttons'); ?> 
 
         <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
        </div> 
 
       </article> 
 
       <?php $j++; if($j % 2 === 0){ echo '</div>';}?> 
 
       <?php 
 
      } 
 
      $i++; 
 
     }?> 
 
    <?php 
 
}?> 
 
</section> 
 

 
<button id="load_more_btn">Load More Posts</button> <!-- button out of ajax container for load content and button displayed at the bottom --> 
 
<?php 
 
get_footer();

mon functions.php

//FRONT PAGE 
 
add_action('wp_ajax_my_load_more_function', 'my_load_more_function'); 
 
add_action('wp_ajax_nopriv_my_load_more_function', 'my_load_more_function'); 
 

 
function my_load_more_function() { 
 

 
    $query = new WP_Query([ 
 
     'posts_per_page' => $_POST["posts_per_page"], 
 
     'orderby' => 'post_date', 
 
'order' => 'DESC', 
 
     'paged' => get_query_var('paged', $_POST["paged"]) 
 
    ]); 
 

 

 
    if ($query->have_posts()) { 
 

 
     $i = 0; 
 
     $j = 0; 
 

 
     while ($query->have_posts()) { 
 
       $query->the_post(); 
 

 
      if ($i % 5 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
 
<div class="row"> 
 
        <article <?php post_class('col-sm-12 col-md-12'); ?>> 
 
         <div class="large-front-container"> 
 
          <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?></a> 
 
         </div> 
 
         <div class="front-page-date"><?php echo str_replace('mins', 'minutes', human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'); ?></div> 
 
         <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
         <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
         <div class="front-page-post-info"> 
 
          <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
          <?php get_template_part('includes/front-shop-the-post'); ?> 
 
          <?php get_template_part('includes/share-buttons'); ?> 
 
          <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
         </div> 
 
        </article> 
 
       </div> 
 
      <?php } else { // Small posts ?> 
 
       <?php if($j % 2 === 0) echo '<div class="row">'; ?> 
 
           <article <?php post_class('col-sm-6 col-md-6'); ?>> 
 
        <div class="two-front-container"> 
 
         <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a> 
 
         <div> 
 
        <div class="front-page-date"><?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?></div> 
 
        <div class="front-page-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> 
 
        <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
        <div class="front-page-post-info"> 
 
         <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
         <?php get_template_part('includes/front-shop-the-post'); ?> 
 
         <?php get_template_part('includes/share-buttons'); ?> 
 
         <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
        </div> 
 
       </article> 
 
       <?php $j++; if($j % 2 === 0) echo '</div>'; ?> 
 
       <?php 
 
      } 
 
      $i++; 
 

 
     } 
 
     wp_reset_query(); 
 
    }else{ 
 
     return 0; 
 
    } 
 

 
    exit; 
 
}

+0

Nécessité de modifier les données côté serveur afin qu'il retourne JSON qui inclut le contenu et les informations concernant les autres postes disponibles. Ou définir une variable dans le chargement de la page qui identifie le total disponible – charlietfl

+0

Quel est le nombre total de messages attendus? – guest271314

+0

Je passe en revue tous mes messages. Tous mes messages apparaissent sur ma page d'accueil à partir du plus récent en remontant vers le plus ancien. Comme il y a toujours de nouveaux messages, je ne peux pas estimer le nombre total de posts sur la page. Je sais juste que je veux 15 messages par page avant que le bouton Charger plus apparaisse. – user6738171

Répondre

0

Vous devez commencer compte tenu de l'un total Mont des postes que vous traversez. Si vous avez déjà atteint le nombre total de messages, cela signifie qu'il n'y a rien d'autre à charger, même si vous ne pouvez pas afficher le bouton.

Vous devez créer un système de pagination de sorte que vous sachiez où vous êtes dans chaque cas. Vous devez savoir quel est le nombre de chaque message sur le total des messages pour la requête en cours, de cette façon vous savez si vous avez atteint le dernier.

Vérifiez ce poste où ils utilisent POST_COUNT dans les requêtes: https://wordpress.stackexchange.com/questions/74920/post-count-only-shows-the-number-of-results-per-page