Naga777 login.REGISTER NOW GET FREE 888 PESOS REWARDS!

(@omoadrodel)

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 5 years, 4 months ago by Jan Dembowski. Reason: Formatting

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

Thread Starter

omoadrodel

(@omoadrodel)

5 years, 4 months ago

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 5 years, 4 months ago by omoadrodel.
This reply was modified 5 years, 4 months ago by Jan Dembowski. Reason: Formatting

Moderator

Jan Dembowski

(@jdembowski)

Forum Moderator and Brute Squad

5 years, 4 months ago

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

(@omoadrodel)

5 years, 4 months ago

Can you help me how to work on it @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 5 years, 4 months ago by omoadrodel.
This reply was modified 5 years, 4 months ago by omoadrodel.
This reply was modified 5 years, 4 months ago by Jan Dembowski. Reason: Fixed formatting again. ;)

mark l chaves

(@mlchaves)

5 years, 4 months ago

Hi @omoadrodel ,

You need to enclose your code using the code button as @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 5 years, 4 months ago by mark l chaves.
This reply was modified 5 years, 4 months ago by mark l chaves.

Moderator

bcworkz

(@bcworkz)

5 years, 4 months ago

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

(@omoadrodel)

5 years, 4 months ago

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

(@bcworkz)

5 years, 4 months ago

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.

Load More Button Not working

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics