I'm using the jQuery Waypoints plugin to trigger something when the user reached the bottom of the page. Once the user reaches the bottom of the page, an AJAX call is triggered and I get a JSON response. Once this is done, the page size increases, meaning that we're not at the bottom of the page anymore (stuff gets added to the page), but still, the Waypoints plugin keeps repeating that AJAX call twice or thrice even though the bottom of the page is not there anymore, it's far below...
This is what I'm struggling to fix. I have tried a lot of ideas I thought of, but none worked. This is how I use the Waypoints plugin:
var pop_loader = $('<br /><div class="loading row" style="display: none;"><div class="col-lg-12 center">' +
generate_preloader(32, 3) + '</div></div><br />');
var pop_footer = $('.last-box-popular');
var pop_start = { from: 24 };
var pop_opts = { offset: '100%' };
pop_footer.waypoint(function(event, direction) {
var $boxCount = document.getElementsByClassName('image');
if ($boxCount.length < 24){
return false;
}
pop_footer.waypoint('destroy');
$('.loadMore').append(pop_loader);
$('.loading').fadeIn('slow');
delay('pop', function(){
$.ajax({
type: 'GET',
url: 'image.php?action=fetchMore&start=' + pop_start.from,
success: function(data){
try {
var response = $.parseJSON(data);
} catch (e) {
display_alert(lang.L_TPL_AJAX_CATCH, 'danger', 3000, 'top');
return false;
}
if ('error' in response || $.isEmptyObject(response.images)) {
pop_loader.hide();
return false;
}
pop_start.from += 24;
pop_loader.detach();
pop_footer.waypoint(pop_opts);
// Remove previous last class
$('.image').removeClass('last-box-popular');
var imagesLength = response.images.length - 1;
for (var key in response.images)
{
var image = response.images[key];
var imageHTML = '<span class="image' + ((imagesLength == key) ? ' last-box-popular' : '') + '">';
imageHTML += '<div class="topleft-corner">';
imageHTML += '<div class="dropdown">';
imageHTML += '<span class="icon-share dropdown-toggle" id="share-dropdown" data-toggle="dropdown"></span>';
imageHTML += '<ul class="dropdown-menu share-dropdown" role="menu" aria-labelledby="share-dropdown">';
imageHTML += '<li role="presentation">';
imageHTML += '<a href="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="facebook_share" href="#" role="menuitem" tabindex="-1">';
imageHTML += '<span class="icon-facebook-circled-2"></span> Facebook';
imageHTML += '</a>';
imageHTML += '</li>';
imageHTML += '<li role="presentation">';
imageHTML += '<a href="http://twitter.com/share?url=' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '&text=Shared via @IMGzer - " class="twitter_share" role="menuitem" tabindex="-1">';
imageHTML += '<span class="icon-twitter"></span> Twitter';
imageHTML += '</a>';
imageHTML += '</li>';
imageHTML += '<li role="presentation">';
imageHTML += '<a href="https://plus.google.com/share?url=' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="google_share" role="menuitem" tabindex="-1" href="#">';
imageHTML += '<span class="icon-gplus-circled-1"></span> Google+';
imageHTML += '</a>';
imageHTML += '</li>';
imageHTML += '</ul>';
imageHTML += '</div>';
imageHTML += '</div>';
imageHTML += '<div class="topright-corner">';
imageHTML += '<span class="glyphicon glyphicon-minus-sign" title="Report" data-placement="left" data-toggle="modal" data-target="#report" data-report="image" data-reference="' + image.image_name + '"></span>';
imageHTML += '</div>';
imageHTML += '<section class="row">';
imageHTML += '<div class="col-lg-12 center upload-output">';
imageHTML += '<br /><br />';
imageHTML += '<div class="img-container">';
imageHTML += '<div class="helper"></div>';
imageHTML += '<a href="' + generate_site_url() + 'image/' + image.image_name + '">';
imageHTML += '<img src="' + generate_site_url() + 'store/t/' + image.image_name + '.' + image.image_extension + '" class="img-thumbnail">';
imageHTML += '</a>';
imageHTML += '</div>';
imageHTML += '<br />';
imageHTML += '<span class="small">Uploaded ' + image.upload_time + ' by <strong>' + ((image.username == null || image.username == '') ? 'a guest' : '<a href="' + generate_site_url() + 'user/' + image.username + '">' + image.username + '</a>') + '</strong></span>';
imageHTML += '<br />';
imageHTML += '<span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span> ' + image.image_likes + '</span> ';
imageHTML += '<span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span> ' + image.image_dislikes + '</span> ';
imageHTML += '<span class="label label-warning"><span class="glyphicon glyphicon-heart"></span> ' + image.image_favorited + '</span>';
imageHTML += '</div>';
imageHTML += '</section>';
imageHTML += '</span> ';
$('.images').append(imageHTML);
$('.image').slideDown('fast');
}
}
});
}, average_ajax_delay);
}, pop_opts); // Popular
How do I make the Waypoints plugin make one AJAX call when reaching the bottom. then another AJAX call when the "new" bottom is reached.
If there is anything additional needed to make this question clearer, please let me know.
Hmm, it seems that trying to implement a standard AJAX call when reaching the bottom of the container is a bit buggy, even when I have tried to refresh waypoint's plugin using an internal function http://jsfiddle.net/f3YZ2/105/
Instead I have created a more elegant solution, I have placed a footer element at the very bottom of the page. You may make it invisible using css like:
.footer{opacity:1;visibibility:hidden}
You should avoid hiding it as it would not be detected by the plugin:
Here is the full example: http://jsfiddle.net/f3YZ2/108/