Create AJAX Load More Functionality

Create AJAX Load More Functionality — a practical guide to Create AJAX Load More Functionality themes tutorial with clear examples you can reuse in real projects.

Load additional testimonial posts dynamically using AJAX without refreshing the page.

function load_posts(jQueryhtml) {
    var str = 'action=more_post_ajax';
    var offset = jQuery('#offset').val();
    if (offset != '' && offset != 0) {
        str += '&offset=' + offset;
    }
    jQuery.ajax({
        url: admin_ajax_url.admin_URL,
        type: "POST",
        dataType: "JSON",
        data: str,
        beforeSend: function() {
            if (jQueryhtml == 'html') {
                jQuery('#appenddata').hide();
                jQuery('#html_loader').addClass('html_loader');
                jQuery('.more_posts').hide();
            } else {
                jQuery('#loader').addClass('loader');
            }
        },
        success: function(data) {
           
            jQuery('.more_posts').show();
            jQuery('#appenddata').show();

            var responseData = JSON.parse(JSON.stringify(data));

            if (jQueryhtml == 'html') {
                jQuery('#appenddata').html(responseData.result);
            } else {
                jQuery('#appenddata').append(responseData.result);
            }

            jQuery('#offset').val(responseData.offset);
            var total_post = jQuery('#show_testimonial_post').find('.grid-item').length;
            console.log(responseData.total_post + '<=' + total_post);
            if (responseData.total_post <= total_post) {
                jQuery('.load-more').hide();
            } else {
                jQuery('.load-more').show();
            }
            setTimeout(function() {
            /*jQuery('.grid-item').each(function(){
                jQuery('.grid').masonry();
            });
            jQuery('.grid').masonry('reloadItems');*/
            var jQuerycontainer = jQuery('.grid');
            jQuerycontainer.imagesLoaded(function() {
                jQuerycontainer.masonry('reloadItems');
                jQuerycontainer.masonry({
                    isInitLayout: true,
                    itemSelector: '.grid-item'
                });
            });
            AOS.init();
            setTimeout(function(){
                jQuery('#html_loader').removeClass('html_loader');
                jQuery('#loader').removeClass('loader');
            },1000)
            
            }, 200);
        },
        error: function() {
            alert('ajax error');
        }
    });
}
jQuery(".more_posts").on("click", function() { // When btn is pressed.
    jQueryhtml = 'append';
    load_posts(jQueryhtml);
});