Title: Load More Button Not working
Last modified: October 6, 2019

---

# Load More Button Not working

 *  [omoadrodel](https://wordpress.org/support/users/omoadrodel/)
 * (@omoadrodel)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/)
 * can some one help me on this , i got a problem on click the load more button.
   when i click the button it would display the existing post , i would like to 
   display the other post not the existing post already display.
 *     ```
        function my_enqueue() {
           wp_enqueue_script('ajax-script', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery'), '1.0.0', true );
       	wp_localize_script( 'ajax-script', 'ajax_posts', array(
       	    'ajax_url' => admin_url( 'admin-ajax.php' ),
       	));
   
       }
       add_action( 'wp_enqueue_scripts', 'my_enqueue' );
   
       function more_post_ajax(){
       global $wpdb;
           $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
           $page = $_POST['current_page']+1;
       	$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
   
           $args = array(
               'post_type' => 'testimonial',
               'posts_per_page' => $ppp,
               'paged'    => $page,
               'cat' => $cat,
           );
   
           $loop = new WP_Query($args);
   
           if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
               echo  '<div class="small-12 large-4 columns">
                       <h1>'.get_the_title().'</h1>
                       <p>'.get_the_content().'</p>
                </div>';
   
           endwhile;
           endif;
           wp_reset_postdata();
           die();
       }
       ```
   
 * here’s my js
 *     ```
       var ppp = 3; // Post per page
       var pageNumber = 1;
       var cat = 6;
       jQuery(document).ready(function($) {
           $('#load_more').on('click', function(){    
               var get_select_val = $(this).val();
               var str_split = get_select_val.split(' ');
               $.ajax({
                   url : ajax_posts.ajax_url,
                   type: "POST",
                   data : {
                       'action' : 'more_post_ajax',
                       'pageNumber' : pageNumber,
                       'ppp' : ppp,
                       'cat' : cat,
                   }
                   ,beforeSend : function ( xhr ) {
                    $('.spinner-loading').fadeIn(1000); 
                     $("#load_more").fadeOut(100);
                   },
                   error: function(response) {
                       console.log(response);
                   },
                   success: function(response) {
                       var $response = $(response);
                       if($response.length){
                           $('#mypost').append($response);
                           $('.spinner-loading').fadeOut(100);
                           $("#load_more").fadeIn(500);
                           pageNumber++;  
                       }else{
                           $("#load_more").fadeOut(100);
                           $('.spinner-loading').css("display","none");
                           $(".no-more-post strong").fadeIn(1000).fadeOut(2000);
                           $(".no-more-post").css("padding-top","30px");
                       }
                   }
               });
           });
       });
       ```
   
    -  This topic was modified 6 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
      Reason: Formatting

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Thread Starter [omoadrodel](https://wordpress.org/support/users/omoadrodel/)
 * (@omoadrodel)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12001916)
 *     ```
       function more_post_ajax(){
       global $wpdb;
           $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
           $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
       	$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
   
           $args = array(
               'post_type' => 'testimonial',
               'posts_per_page' => $ppp,
               'paged'    => $page,
               'cat' => $cat,
           );
   
           $loop = new WP_Query($args);
   
           $out = '';
   
           if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
               echo  '<div class="small-12 large-4 columns">
                       <h1>'.get_the_title().'</h1>
                       <p>'.get_the_content().'</p>
                </div>';
   
           endwhile;
           endif;
           wp_reset_postdata();
           die();
       } here's my load more function rather
   
       and my js 
       var ppp = 3; // Post per page
       var pageNumber = 1;
       var cat = 6;
       jQuery(document).ready(function($) {
           $('#load_more').on('click', function(){    
               $.ajax({
                   url : ajax_posts.ajax_url,
                   type: "POST",
                   data : {
                       'action' : 'more_post_ajax',
                       'pageNumber' : pageNumber,
                       'ppp' : ppp,
                       'cat' : cat,
                   }
                   ,beforeSend : function ( xhr ) {
                    $('.spinner-loading').fadeIn(1000); 
                     $("#load_more").fadeOut(100);
                   },
                   error: function(response) {
                       console.log(response);
                   },
                   success: function(response) {
                       var $response = $(response);
                       if($response.length){
                           $('#mypost').append($response);
                           $('.spinner-loading').fadeOut(100);
                           $("#load_more").fadeIn(500);
                           pageNumber++;  
                       }else{
                           $("#load_more").fadeOut(100);
                           $('.spinner-loading').css("display","none");
                           $(".no-more-post strong").fadeIn(1000).fadeOut(2000);
                           $(".no-more-post").css("padding-top","30px");
                       }
                   }
               });
           });
       });
       ```
   
 * can you help me on this please Thanks
    -  This reply was modified 6 years, 10 months ago by [omoadrodel](https://wordpress.org/support/users/omoadrodel/).
    -  This reply was modified 6 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
      Reason: Formatting
 *  Moderator [Jan Dembowski](https://wordpress.org/support/users/jdembowski/)
 * (@jdembowski)
 * Forum Moderator and Brute Squad
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12002188)
 * Side note: Code is unreadable unless you use the `Code` button in the post editor.
   I’ve fixed it but please use that going forward.
 *  Thread Starter [omoadrodel](https://wordpress.org/support/users/omoadrodel/)
 * (@omoadrodel)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12002274)
 * Can you help me how to work on it [@jdembowski](https://wordpress.org/support/users/jdembowski/)
   i’m new on this . Thanks for reply. I already put and id in my button . <Button
   id=”load_more”>View More</Button>. It’s work but the existing post would display,
   i would like to display only the post that doesn’t display yet.
 * Example
    Post1 Post2 When i click the button Post3 Post4 Should display only
 * But on this code when i click the button the existing post1 and post2 will display
   also
 * short code for display my post
 *     ```
       function testimonial(){
       $testimonial = ''; global $post;
       $args = get_posts( array('post_type' => 'testimonial', 'posts_per_page' => 2, 'page' => 1 ) );
       	foreach ($args as $post) {
       		$image = get_field('field_5d9668d733e48',$post);
       		$company = get_field('field_5d9668e633e4a',$post);
       		$site = get_field('field_5d9668f233e4b',$post);
       		$position = get_field('field_5d9668dd33e49',$post);
       		$content = get_field('field_5d9668b133e46',$post);
       		$title = get_field('field_5d967b46823eb',$post);
       		$testimonial .='
       		<div class="testimonial-container twelve columns">
       			<div class="four columns omega image box-container">
       				<img src="'.$image['url'].'" alt="'.$image['title'].'" />
       			</div>
       			<div class="twelve columns alpha info box-container">
       				<h4>'.$title.'</h4>
       				<p class="name">'.get_field('field_5d9668a833e45',$post).'</p>
       				<ul>
       					'.( $position != '' ? '<li>' . $position . '</li>' : '' ) .' 
       					'.( $company != '' ? '<li><a href="' .$site. '">' . $company . '</a></li>' : '' ) .'
       				</ul>
       				<div class="content twelve columns alpha">
       					<p>'.$content.'</p>
       				</div>
       			</div>
       		</div>
       		';
       	}
       	$testimonial .='
       	<div id="mypost"></div>
       	<div class="twelve columns bottom">
       		<p class="no-more-post"><strong>No More Post Found</strong></p>
       		<p><img src="'. get_stylesheet_directory_uri() . '/images/spinner.apng' .'" alt="spinner" /></p>
       		<button id="load_more">View More</button>
       	</div>';
       	wp_reset_postdata();
       	return $testimonial;
       }
       add_shortcode('testimonial','testimonial');
   
       !* the function for load more post
       function more_post_ajax(){
       global $wpdb;
           $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
           $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
           $args = array(
               'post_type' => 'testimonial',
               'posts_per_page' => $ppp,
               'paged'    => $page,
           );
   
           $loop = new WP_Query($args);
           if ($loop -> have_posts()) :  
           	while ($loop -> have_posts()) : $loop -> the_post();
             		$image = get_field('field_5d9668d733e48',$loop->ID);
       			$company = get_field('field_5d9668e633e4a',$loop->ID);
       			$site = get_field('field_5d9668f233e4b',$loop->ID);
       			$position = get_field('field_5d9668dd33e49',$loop->ID);
       			$content = get_field('field_5d9668b133e46',$loop->ID);
       			$title = get_field('field_5d967b46823eb',$loop->ID);
       			$name = get_field('field_5d9668a833e45',$loop->ID);
   
       			if( !empty($image) ){
       			$images = '<img src="'.$image['url'].'" alt="'.$image['title'].'" />';
       			}
       			else {
       				$images = '<img src="'.get_stylesheet_directory_uri() . '/images/default.png' .'" alt="'.$name.'" />';
       			}
       			 echo'
       			<div class="testimonial-container twelve columns">
       				<div class="four columns omega image box-container">
       					'.$images.'
       				</div>
       				<div class="twelve columns alpha info box-container">
       					<h4>'.$title.'</h4>
       					<p class="name">'.$name.'</p>
       					<ul>
       						'.( $position != '' ? '<li>' . $position . '</li>' : '' ) .' 
       						'.( $company != '' ? '<li><a href="' .$site. '">' . $company . '</a></li>' : '' ) .'
       					</ul>
       					<div class="content twelve columns alpha">
       						<p>'.$content.'</p>
       					</div>
       				</div>
       			</div>
       			';
           endwhile;
           endif;
           wp_reset_postdata();
           die();
       }
   
       add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
       add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
   
       !* calling for ajax and js 
        function my_enqueue() {
   
           wp_enqueue_script('ajax-script', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery'), '1.0.0', true );
       	wp_localize_script( 'ajax-script', 'ajax_posts', array(
       	    'ajax_url' => admin_url( 'admin-ajax.php' ),
       	    'noposts' => __('No older posts found', 'twentyfifteen'),
       	));
   
       }
       add_action( 'wp_enqueue_scripts', 'my_enqueue' );
   
       /* this is my ajax 
       var ppp = 10; // Post per page
       var pageNumber = 1;
       jQuery(document).ready(function($) {
           $('#load_more').on('click', function(){    
               $.ajax({
                   url : ajax_posts.ajax_url,
                   type: "POST",
                   data : {
                       'action' : 'more_post_ajax',
                       'pageNumber' : pageNumber,
                       'ppp' : ppp,
                   }
                   ,beforeSend : function ( xhr ) {
                    $('.spinner-loading').fadeIn(1000); 
                     $("#load_more").fadeOut(100);
                   },
                   error: function(response) {
                       console.log(response);
                   },
                   success: function(response) {
                       var $response = $(response);
                       if($response.length){
                           $('#mypost').append($response);
                           $('.spinner-loading').fadeOut(100);
                           $("#load_more").fadeIn(500);
                           pageNumber++;  
                       }else{
                           $("#load_more").fadeOut(100);
                           $('.spinner-loading').css("display","none");
                           $(".no-more-post strong").fadeIn(1000).fadeOut(2000);
                           $(".no-more-post").css("padding-top","30px");
                       }
                   }
               });
           });
       });
       ```
   
    -  This reply was modified 6 years, 10 months ago by [omoadrodel](https://wordpress.org/support/users/omoadrodel/).
    -  This reply was modified 6 years, 10 months ago by [omoadrodel](https://wordpress.org/support/users/omoadrodel/).
    -  This reply was modified 6 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).
      Reason: Fixed formatting again. ;)
 *  [mark l chaves](https://wordpress.org/support/users/mlchaves/)
 * (@mlchaves)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12002318)
 * Hi [@omoadrodel](https://wordpress.org/support/users/omoadrodel/) ,
 * You need to enclose your code using the `code` button as [@jdembowski](https://wordpress.org/support/users/jdembowski/)
   mentioned. Or, manually type
 * single back tick YOUR CODE GOES HERE single back tick.
 * Hope that makes sense. I couldn’t find a how-to add code into forum posts. I’ll
   keep looking and post one later if I find it.
 * Thanks!
    -  This reply was modified 6 years, 10 months ago by [mark l chaves](https://wordpress.org/support/users/mlchaves/).
    -  This reply was modified 6 years, 10 months ago by [mark l chaves](https://wordpress.org/support/users/mlchaves/).
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12002917)
 * Your JS code has `var pageNumber = 1;`, so you will always get the first page’s
   worth of posts. On the initial call, you want to set this to `2`, since the site
   page already has page 1 posts. Your Ajax success handler should then be incrementing
   this value each time so subsequent “more” clicks will get the next page’s worth
   of posts.
 * It doesn’t matter if this is all on page 1 of your site, the query for posts 
   thinks you are fetching posts for multiple pages, so you must feed it the page
   numbering it thinks it needs, even though your site is really still on page 1.
 *  Thread Starter [omoadrodel](https://wordpress.org/support/users/omoadrodel/)
 * (@omoadrodel)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12003174)
 * is my code is still unreadable ?
 *     ```
       !*short code for display my testimonial post *!
       function testimonial(){
       $testimonial = ''; global $post;
       $args = get_posts( array('post_type' => 'testimonial', 'posts_per_page' => 2, 'page' => 1 ) );
       	foreach ($args as $post) {
       		$image = get_field('field_5d9668d733e48',$post);
       		$company = get_field('field_5d9668e633e4a',$post);
       		$site = get_field('field_5d9668f233e4b',$post);
       		$position = get_field('field_5d9668dd33e49',$post);
       		$content = get_field('field_5d9668b133e46',$post);
       		$title = get_field('field_5d967b46823eb',$post);
       		$testimonial .='
       		<div class="testimonial-container twelve columns">
       			<div class="four columns omega image box-container">
       				<img src="'.$image['url'].'" alt="'.$image['title'].'" />
       			</div>
       			<div class="twelve columns alpha info box-container">
       				<h4>'.$title.'</h4>
       				<p class="name">'.get_field('field_5d9668a833e45',$post).'</p>
       				<ul>
       					'.( $position != '' ? '<li>' . $position . '</li>' : '' ) .' 
       					'.( $company != '' ? '<li><a href="' .$site. '">' . $company . '</a></li>' : '' ) .'
       				</ul>
       				<div class="content twelve columns alpha">
       					<p>'.$content.'</p>
       				</div>
       			</div>
       		</div>
       		';
       	}
       	$testimonial .='
       	<div id="mypost"></div>
       	<div class="twelve columns bottom">
       		<p class="no-more-post"><strong>No More Post Found</strong></p>
       		<p><img src="'. get_stylesheet_directory_uri() . '/images/spinner.apng' .'" alt="spinner" /></p>
       		<button id="load_more">View More</button>
       	</div>';
       	wp_reset_postdata();
       	return $testimonial;
       }
       add_shortcode('testimonial','testimonial');
   
       !* the function for load more post
       function more_post_ajax(){
       global $wpdb;
           $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
           $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
           $args = array(
               'post_type' => 'testimonial',
               'posts_per_page' => $ppp,
               'paged'    => $page,
           );
   
           $loop = new WP_Query($args);
           if ($loop -> have_posts()) :  
           	while ($loop -> have_posts()) : $loop -> the_post();
             		$image = get_field('field_5d9668d733e48',$loop->ID);
       			$company = get_field('field_5d9668e633e4a',$loop->ID);
       			$site = get_field('field_5d9668f233e4b',$loop->ID);
       			$position = get_field('field_5d9668dd33e49',$loop->ID);
       			$content = get_field('field_5d9668b133e46',$loop->ID);
       			$title = get_field('field_5d967b46823eb',$loop->ID);
       			$name = get_field('field_5d9668a833e45',$loop->ID);
   
       			if( !empty($image) ){
       			$images = '<img src="'.$image['url'].'" alt="'.$image['title'].'" />';
       			}
       			else {
       				$images = '<img src="'.get_stylesheet_directory_uri() . '/images/default.png' .'" alt="'.$name.'" />';
       			}
       			 echo'
       			<div class="testimonial-container twelve columns">
       				<div class="four columns omega image box-container">
       					'.$images.'
       				</div>
       				<div class="twelve columns alpha info box-container">
       					<h4>'.$title.'</h4>
       					<p class="name">'.$name.'</p>
       					<ul>
       						'.( $position != '' ? '<li>' . $position . '</li>' : '' ) .' 
       						'.( $company != '' ? '<li><a href="' .$site. '">' . $company . '</a></li>' : '' ) .'
       					</ul>
       					<div class="content twelve columns alpha">
       						<p>'.$content.'</p>
       					</div>
       				</div>
       			</div>
       			';
           endwhile;
           endif;
           wp_reset_postdata();
           die();
       }
   
       add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
       add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
   
       !* calling for ajax and js 
        function my_enqueue() {
   
           wp_enqueue_script('ajax-script', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery'), '1.0.0', true );
       	wp_localize_script( 'ajax-script', 'ajax_posts', array(
       	    'ajax_url' => admin_url( 'admin-ajax.php' ),
       	    'noposts' => __('No older posts found', 'twentyfifteen'),
       	));
   
       }
       add_action( 'wp_enqueue_scripts', 'my_enqueue' );
   
       /* this is my ajax 
       var ppp = 10; // Post per page
       var pageNumber = 1;
       jQuery(document).ready(function($) {
           $('#load_more').on('click', function(){    
               $.ajax({
                   url : ajax_posts.ajax_url,
                   type: "POST",
                   data : {
                       'action' : 'more_post_ajax',
                       'pageNumber' : pageNumber,
                       'ppp' : ppp,
                   }
                   ,beforeSend : function ( xhr ) {
                    $('.spinner-loading').fadeIn(1000); 
                     $("#load_more").fadeOut(100);
                   },
                   error: function(response) {
                       console.log(response);
                   },
                   success: function(response) {
                       var $response = $(response);
                       if($response.length){
                           $('#mypost').append($response);
                           $('.spinner-loading').fadeOut(100);
                           $("#load_more").fadeIn(500);
                           pageNumber++;  
                       }else{
                           $("#load_more").fadeOut(100);
                           $('.spinner-loading').css("display","none");
                           $(".no-more-post strong").fadeIn(1000).fadeOut(2000);
                           $(".no-more-post").css("padding-top","30px");
                       }
                   }
               });
           });
       });
       ```
   
 * can you help me how to work on it , or what should i change on this code?
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12006730)
 * Jan had fixed your previous post’s code so they accurately reflect the code you
   are using. The underlying post data had remained accurate. Failure to use the
   code button or backticks causes only the _display_ in these forums to be corrupted.
 * The comments in my previous post still stand. Additionally, in your Ajax handler
   you have
    `$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;`
   That `0` probably ought to be a `1`, though the pageNumber parm should always
   be set, so the logic is moot.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Load More Button Not working’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 7 replies
 * 4 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [6 years, 10 months ago](https://wordpress.org/support/topic/load-more-button-not-working-4/#post-12006730)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics