Ajax jQuery load in 9 divs at a time

Question

I'm having a div that looks like this:

<div class="all_articles third_article_module">
    <!--load in content from loadmore.html via ajax -->
</div>

I also have a show me more text that looks like this:

<div class="showmemore">
    <h2>Load more articles</h2>
</div>

My loadmore.html page loops through and show all articles. The ting I want to do is only show a number of articles each time (for example 9) and then the h2 tag appends to the end of the div. When there's no more articles left I want the h2 tag to be hidden. My JS looks like this:

$('.showmemore_inner h2').on("click", function(e){
    e.preventDefault();
    $('.third_article_module').load('loadmore.html');
});

$(document).ajaxStart(function(){
    $(show_header).text('Loading more articles').css('color', '#4c4c4e');
    $('.showmemore .showmemore_inner h2 span').css('display', 'block');
});

$(document).ajaxComplete(function(){
    $('.showmemore').appendTo('.all_articles.third_article_module');
    $('.ajax_article').addClass('active');
    $(show_header).text('Load more articles');
});

In my loadmore.html I have a div container and the content each wrapped in a div that's called .ajax_article.

Answer 1

You should add a parameter to loadmore.html to tell how many articles you need and where to start. like this:

var start = 0;
$('.showmemore_inner h2').on("click", function(e){
    e.preventDefault();
    $('.third_article_module').load('loadmore.html?articles=9&start=' + start,'',function(data) {if(!data) {$('.showmemore_inner h2').remove();}});
    start = start + 9;
}); 

This will ensure that each time show more is clicked, next 9 articles will be fetched, and if no data is received show more will be removed. Of course in loadmore.html you should loop only those articles that are requested by parameters.