themes

Create AJAX Load More Functionality

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);
});

Leave a reply

Your email address will not be published. Required fields are marked *