simple loadmore button with ajax and jquery

//suppose you wanna show 3 posts at a time with ajax $(document).ready(function(){ var count=1, // the total record stored on the data-total attributes of the button total=$('#loadmore').data('total'); //if post is already 3 or less hide the load more button if(total<=3) { $("#loadmore").hide(); } //begin click if record is more then 3 $("#loadmore").click(function(e){ e.preventDefault(); var ajax_url='http://example.com/ajax', data={action:"blog_load_more",count:count}; $.ajax({ url: ajax_url, data: data, method: "post", dataType: "html", beforeSend: function(){ $("#loader").show(); }, success:function(data){ count++; $("#loader").hide(); $(".blog-items").append(data); // check if the total records matches the currently displayed data..if yes and if its equal or more then total hide the load more because we dont have any more data to show now! if(total<=(count*3)) { $("#loadmore").hide(); } } }) }); });

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.