Wordpress Load more Posts on click (Solution) - ajax

Question

Hello All This is a solution for Load more posts by wordpress ajax.
First of all suppose you have section like this.
<section class="hightech-news-content" >
<div class="container">
<?php
$page_number = (get_query_var('paged')) ? get_query_var('paged') : 1;
$page_link = get_pagenum_link(9999999999);
$args = array('post_type' => 'post','posts_per_page' => 3,'paged'=>$page_number);
$the_query = new WP_Query( $args );
$max_page = $the_query->max_num_pages;
?>
<div class="row news-list-row">
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-lg-4 col-md-4 col-sm-6 hightech-news-list">
<div class="row hightech-news-list-row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-4 hightech-news-list-img">
<?php if(has_post_thumbnail()){ ?>
<img class="img-responsive" src="<?php echo get_the_post_thumbnail_url();?>">
<?php }else{ ?>
<img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/Img-1.png">
<?php } ?>
<img class="hi_img" src="<?php echo get_template_directory_uri(); ?>/images/Hi.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-8 hightech-news-list-content">
<h3><?php the_title(); ?></h3>
<p><?php echo substr(strip_tags($post->post_content), 0, 80)."...";?></p>
<br>
<h4>> Lee verder</h4>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif ;?>
<div class="clear"></div>
</div>
<div class="text-center loading-img">
<img id="loading-img" src="<?php echo get_template_directory_uri(); ?>/images/loading.gif" >
</div>
<div class="event-more">
<a href="javascript:void(0)" id="load-more" onclick="loadMoreFun();" data-pagenumber="<?php echo $page_number; ?>" data-maxpage="<?php echo $max_page; ?>" data-pagelink="<?php echo $page_link; ?>">
<h4><img src="<?php echo get_template_directory_uri(); ?>/images/next.png" >Bekijk de agenda</h4>
</a>
</div>
</div>
</section>
Now for loadMoreFun() we can add a script like this.
<script type="text/javascript">
function loadMoreFun() {
var next_page = jQuery('#load-more').data("pagenumber");
var max_page = jQuery('#load-more').data("maxpage");
var next_page_url = jQuery('#load-more').data("pagelink");
var $load_more_btn = jQuery(this);
var request_data = jQuery(this).attr('pagenumber');
next_page++;
jQuery('#load-more').data('pagenumber',next_page);
var next_link = next_page_url.replace(/\d+(\/)?$/, next_page + '$1');
if(next_page <= max_page) {
var post_type = 'post';
$.ajax({
type : 'POST',
url : next_link,
cache: false,
beforeSend: function(){
jQuery('.loading-img').show();
},
complete: function(){
jQuery('.loading-img').hide();
},
success: function(response) {
if (jQuery(response).find('.hightech-news-list')){
var newElems = jQuery(response).find('.news-list-row').html();
jQuery('.news-list-row').append(newElems);
if(next_page == max_page){
jQuery('#load-more').text('No More News Available');
}
} else{
}
}
});
}
}
</script>
Hope it will be helpful for everyone.Please let me know it another help required.