fredwu
Does this work with AJAX and asynchronous calls
I've looked at the source to understand the API better, but it looks like, since it expects a string to be returned from the callback synchronously that it isn't possible to use this with an ajax callback, is this correct?
Hi mate
I got this working with AJAX using content and callback (though callback worked better):
callback: function(fireSequence, pageSequence, scrollDirection)
{
if (scrollDirection == 'next')
{
$.ajax(
{
type: "POST",
url: "/ajax.php",
data: {input: "search-phrase"},
success: function($data){ $('#results').append( eval('(' + $data + ')') ); }
});
}
}
I think this works fine in the callback - but is there a way to delay further calls until the success of the ajax? Like a way to stop more firing until the ajax function says it is ok to process more?
Hi,
This can be done using " fireOnce:true"
If fireOnce :true // only fire once until the execution of the current event is completed
Example :
$(document).endlessScroll
({
fireDelay: 1000,
fireOnce:true,
content: function(i, p, d)
{
$.ajax
({
url: 'page url'',
type: 'POST',
data: queryString,
success: function(data) {
$('#Container').append(data);
}
});
}
});
I guess then you should update in the success function so that the property will fire again.
As far as I understand, the callback option is intended to do this.
But even with fireOnce, this won't work 100% as expected.. consider the main loop :
if (!_this.shouldTryFiring()) {
return;
}
if (_this.ceaseFireWhenNecessary()) {
return;
}
if (!_this.shouldBeFiring()) {
return;
}
_this.resetFireSequenceWhenNecessary();
_this.acknowledgeFiring();
_this.insertLoader();
if (_this.hasContent()) {
_this.showContent();
_this.fireCallback();
_this.cleanUpPagesWhenNecessary();
_this.delayFiringWhenNecessary();
}
_this.removeLoader();
return _this.lastContent = _this.content;
acknowledgeFiring (which sets the variable indicating if a call is finished) won't wait for your AJAX call to succeed, same for removeLoader.
The only solution would be to be to "block" the return value of the content function until AJAX returns, but it's impossible, unless you use synchronous XMLHttpRequest.
I'm trying to find a workaround using ceaseFire or redefining some prototypes, but this looks complicated.
I think I found a reliable way do this with few changes
shouldBeFiring also checks the AJAX loading state via the loading variable
// Keeps trace of AJAX loading state
var loading = false;
// Disable insertLoader / removeLoader
EndlessScroll.prototype.insertLoader = function() {};
EndlessScroll.prototype.removeLoader = function() {};
// Redefine shouldBeFiring to be aware of AJAX loading
EndlessScroll.prototype.shouldBeFiring = function() {
this.calculateScrollableCanvas();
return this.isScrollable
&& (this.options.fireOnce === false || (this.options.fireOnce === true && this.fired !== true && !loading));
};
$('#element').endlessScroll({
fireOnce: true,
loader: '',
ceaseFireOnEmpty: false,
callback: function(i, p, d) {
// Enable loading state
loading = true;
$('.scroll-loader').append('<a class="ajax-loader"></a>');
$.ajax({
type: "GET",
url: "ajax.php",
data: "p=" + p +1,
success: function(html) {
// Disable loading state
loading = false;
$('.scroll-loader a').fadeOut(function() {
return $(this).remove();
});
}
});
}
});
