Open chrisnicola opened 12 years ago
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?
I'm having the same problem :-(
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(); }); } }); } });
[
- [ ] 1.
](url)
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?