How Do I Load Specific Data Via Jquery Ajax In This Codeigniter Application, Instead Of The Entire Page?

I have been working on an online newspaper/blogging application with CodeIgniter 3.1.8 and Twitter Bootstrap 4. I am currently working on a lazy loading (of posts) feature. By defa

Solution 1:

You seem to be trying to reload the entire page with paginated data - that's a really bad practice. In the long run, you'll end up with slower pages that way.

You would be better off having a separate endpoint for your AJAX that outputs a JSON array of HTML strings, one for each post. This is still slower than using a 2-tier solution like Codeigniter and React, but it's certainly faster than constantly rerendering the entire UI.

Solution 2:

I got a working solution:

(function($) {

    var currentPage = 2,
        maxPage = $('#postsContainer').data('max-page'),
        posts = null;

    $('.pagination').hide();

    $(window).scroll(function() {
        var toBottom = $(window).scrollTop() >= $(document).height() - $(window).height() - 25;

        if (toBottom && currentPage <= maxPage) {
            loadMore();
        }
    });

    functionloadMore() {
        $.ajax({
                url: baseUrl + '?page=' + currentPage,
                type: 'GET',
                beforeSend: function() {
                    if (typeof posts != 'undefined') {
                        $('.loader').show();
                    }
                }
            })
            .done(function(data) {
                $('.loader').hide();
                posts = $(data).find('#postsContainer').html();

                if (typeof posts != 'undefined') {
                    $('#postsContainer').append(posts);
                    currentPage = currentPage + 1;

                    if (currentPage > maxPage) {
                        $('#postsContainer').append('<p class="text-center text-muted">No more posts to load</p>');
                    }
                }
            });
    }

})(jQuery);