I have created a ajax load more button to grab more data from my database, which all works fine. I am now trying to do a count, so the button displays how many results are left to display. Here is my jQuery code that is fired when the button is clicked:
jQuery(document).ready(function(){
jQuery(document).on('click','.show_more',function(){
var ID = jQuery(this).attr('id');
var count = jQuery(".singleproduct").length;
var totals = jQuery('.totalleft').text();
var finaltotal = totals - count;
//jQuery('.show_more').hide();
jQuery('.loding').show();
jQuery.ajax({
type:'POST',
async: true,
crossDomain : true,
url:'example.com/data.php',
data:'count='+count,
success:function(html){
//jQuery('#show_more_main'+ID).remove();
jQuery('.retailitems').append(html);
jQuery('html, body').animate({scrollTop: jQuery(".site-info").offset().top}, 1000);
}
});
jQuery( ".totalleft" ).replaceWith( finaltotal );
});
});
And here is the code for the button:
<span id="<?php echo $result['id']; ?>" class="show_more" title="Load more posts">Load <span class="totalleft"><?php echo $loadmore;?></span> more</span>
When clicked for the first time, the button updates with the correct remaining results. When clicked a second time, the news results populate, but the count remains the same.
Do i have things in the right order above?
Thanks
EDIT
So i found the issue. The calculations were correct, but when updating the count on the button i was actually removing the class of 'totalleft' with this:
jQuery( ".totalleft" ).replaceWith( finaltotal );
So i replaced this with:
jQuery( ".totalleft" ).text( finaltotal );
and all is fine, thanks for all the help.
parse the text()
in .totalleft
to get an integer value
var totals = parseInt(jQuery('.totalleft').text());
if your calculations are correct, you should get the right number back
EDIT
because ajax
is async
you are re-updating the value of .totalleft
before the ajax
is complete.
make sure that you are doing that in the ajax
callback:
success:function(html){
//jQuery('#show_more_main'+ID).remove();
jQuery('.retailitems').append(html);
jQuery('html, body').animate({scrollTop: jQuery(".site-info").offset().top}, 1000);
jQuery( ".totalleft" ).replaceWith( finaltotal );
}
finally, I'm not sure what var count = jQuery(".singleproduct").length;
is so make sure that the values you are expecting are correct by console logging before and after the subtraction
EDIT #2
var count = jQuery(`.singleproduct`).length;
console.log('count :' + count);
var totals = jQuery('.totalleft').text();
console.log('totals :' + totals);
are you getting numbers on the above logs? if not, then you might be replacing some part of your html with the ajax
request and singleproduct
or totalleft
may not be there anymore