• Hello I have set up custom Ajax load more without plugins, but it’s only showing 3 posts on home page, and when clicking on button to load more it’s not loading anything. As I am a beginner I am pretty sure I have done a few coding mistakes.

    I will really appreciate it if you can help me to spot my mistake and fix it.

    Here are the codes I used:

    First I have added this to functions.php

    function bsubash_load_more_scripts() {
    	wp_enqueue_script('jquery');
    	wp_register_script( 'loadmore_script', get_stylesheet_directory_uri() . '/js/ajax.js', array('jquery') );
    	wp_localize_script( 'loadmore_script', 'loadmore_params', array(
    		'ajaxurl' => admin_url('admin-ajax.php'),
    	) );
    
     	wp_enqueue_script( 'loadmore_script' );
    }
     
    add_action( 'wp_enqueue_scripts','bsubash_load_more_scripts' );
    

    Then under the same line I’ve added this

    function bsubash_loadmore_ajax_handler(){
    	$type = $_POST['type'];
    	$category = isset($_POST['category']) ? $_POST['category']: '';
    	$args['paged'] = $_POST['page'] + 1;
    	$args['post_status'] = 'publish';
    	$args['posts_per_page'] =  $_POST['limit'];
    	if($type == 'archive'){
    		$args['category_name'] = $category;
    	}
    	query_posts( $args );
    	if( have_posts() ) :
    		while(have_posts()): the_post();	
    //write your single post card	
            	the_title();
    the_excerpt();
        endwhile;
    	endif;
    	die;
    }
    add_action('wp_ajax_loadmore','bsubash_loadmore_ajax_handler');
    add_action('wp_ajax_nopriv_loadmore','bsubash_loadmore_ajax_handler');

    After that, in my index.php where I added this code to the code that I use to display my posts on homepage

    <div class="container"> <!-- container start -->
    	<div class="row overflow-hidden"> <!-- row start -->
    	<?php
          $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
          $latests = new WP_Query(array(
          	'post_type' => 'post',
          	'posts_per_page' => 3,
          	'paged' => $paged
          ));
          
          while($latests->have_posts()): $latests->the_post();
    			?>
    			<div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 col-xl-3"> <!-- columns start -->
    				<a href="<?php the_permalink(); ?>">
    					<div class="title-box mx-auto mb-0">
    						<h1 class="title-color">
    							<?php
    								$the_title = get_the_title();
    							if ( $the_title ) {
    								echo esc_html( the_title() );
    							} else {
    								echo 'No Title';
    							}
    							?>
    						</h1>
    						<?php
    						if ( has_post_thumbnail() ) {
    							the_post_thumbnail('homepage-thumbnail', array('class' => 'featured-image'));
    						} else {
    							?>
    								<img class="img-fluid" src="<?php echo esc_url_raw( get_template_directory_uri() . '/images/bg.jpg' ); ?>">
    								<?php
    						}
    						?>
    					</div>
    				</a>
    			</div>
    			<?php
    		endwhile; // End of the loop.
    		?>
    	</div>
    </div> <!-- container ends -->
    
    <script>
       var limit = 5,
           page = 1,
           type = 'latest',
           category = '',
           max_pages_latest = <?php echo $latests->max_num_pages ?>
    </script>
    <?php if ( $latests->max_num_pages > 1 ){
       echo '<div class="load_more text-center">
                        <a href="#" class="btn btn-circle btn-inverse btn-load-more">More Article</a> 
                    </div>';
            }else{?>
    <article>
       <h1>Sorry...</h1>
       <p><?php _e('Sorry, No Posts Available !'); ?></p>
    </article>
    <?php }
       wp_reset_query();
       ?>

    and finally I added js files to /js/ajax.php

    jQuery(function($) {
        $('.btn-load-more').click(function(e) {
            e.preventDefault();
            var button = $(this),
                data = {
                    'action': 'loadmore',
                    'limit': limit,
                    'page': page,
                    'type': type,
                    'category': category
                };
    
            $.ajax({
                url: loadmore_params.ajaxurl,
                data: data,
                type: 'POST',
                beforeSend: function(xhr) {
                    button.text('Loading...'); // change the button text, you can also add a preloader image
                },
                success: function(data) {
                    if (data) {
    $(".latest_posts_wrapper").append(data);
                        page++;
                        button.text('More Articles');
                        if (page == max_pages_latest)
                            button.remove(); // if last page, remove the button
                    } else {
                        button.remove(); // if no data, remove the button as well
                    }
                }
            });
        });
    
    });

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    When you assign a static object definition to data: in an $.ajax() call, PHP isn’t able to read the object’s properties. The data needs to be formatted as JSON or form data. Try adding dataType : 'json', to your $.ajax() parameters.

Viewing 1 replies (of 1 total)
  • The topic ‘Ajax Load More Not Working’ is closed to new replies.