posts – WordPress Ajax load would not work

Whats up I’ve arrange customized Ajax load extra with out plugins, nevertheless it’s solely exhibiting 3 posts on dwelling web page, and when clicking on button to load extra it’s not loading something. As I’m a newbie I’m fairly positive I’ve performed a number of coding errors. I consider I may need performed the error in index.php

Listed here are the codes I used:

First I’ve added this to features.php

perform 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 beneath the identical line I’ve added this

perform bsubash_loadmore_ajax_handler(){
    $sort = $_POST['type'];
    $class = isset($_POST['category']) ? $_POST['category']: '';
    $args['paged'] = $_POST['page'] + 1;
    $args['post_status'] = 'publish';
    $args['posts_per_page'] =  $_POST['limit'];
    if($sort == 'archive'){
        $args['category_name'] = $class;
    }
    query_posts( $args );
    if( have_posts() ) :
        whereas(have_posts()): the_post();    
//write your single submit 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 the place I added this code to the code that I take advantage of to show my posts on homepage

<div class="container"> <!-- container begin -->
    <div class="row overflow-hidden"> <!-- row begin -->
    <?php
      $paged = ( get_query_var('web page') ) ? get_query_var('web page') : 1;
      $latests = new WP_Query(array(
        'post_type' => 'submit',
        'posts_per_page' => 3,
        'paged' => $paged
      ));
      
      whereas($latests->have_posts()): $latests->the_post();
            ?>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4 col-xl-3"> <!-- columns begin -->
                <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() . '/photographs/bg.jpg' ); ?>">
                                <?php
                        }
                        ?>
                    </div>
                </a>
            </div>
            <?php
        endwhile; // Finish of the loop.
        ?>
    </div>
</div> <!-- container ends -->

<script>
   var restrict = 5,
       web page = 1,
       sort="newest",
       class = '',
       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">Extra Article</a> 
                </div>';
        }else{?>
<article>
   <h1>Sorry...</h1>
   <p><?php _e('Sorry, No Posts Obtainable !'); ?></p>
</article>
<?php }
   wp_reset_query();
   ?>

and eventually I added js recordsdata to /js/ajax.php

jQuery(perform($) {
    $('.btn-load-more').click on(perform(e) {
        e.preventDefault();
        var button = $(this),
            information = {
                'motion': 'loadmore',
                'restrict': restrict,
                'web page': web page,
                'sort': sort,
                'class': class
            };

        $.ajax({
            url: loadmore_params.ajaxurl,
            information: information,
            sort: 'POST',
            beforeSend: perform(xhr) {
                button.textual content('Loading...'); // change the button textual content, you can even add a preloader picture
            },
            success: perform(information) {
                if (information) {
$(".latest_posts_wrapper").append(information);
                    web page++;
                    button.textual content('Extra Articles');
                    if (web page == max_pages_latest)
                        button.take away(); // if final web page, take away the button
                } else {
                    button.take away(); // if no information, take away the button as effectively
                }
            }
        });
    });

});