Mootools AJAX timeout

Wednesday, January 17. 2007
8 comments
0 trackbacks

UPDATED

Who needs descriptions? This adds a timeout option to the mootools Ajax class...

Ajax = Ajax.extend({
    request: function(){
    if (this.options.timeout) {
        this.timeoutTimer=window.setTimeout(this.callTimeout.bindAsEventListener(this), this.options.timeout);
        this.addEvent('onComplete', this.removeTimer);
    }
    this.parent();
    },

    callTimeout: function () {
        this.transport.abort();
        this.onFailure();
        if (this.options.onTimeout) {
            this.options.onTimeout();
        }
    },

    removeTimer: function() {
        window.clearTimeout(this.timeoutTimer);
    }
});

You can call it like this:

var myAjax = new Ajax('lengthy.php', {method: 'get', update: $('content'), timeout: 2000, onTimeout: function() {alert('timeout')}}).request();
by Stefan LH

Comments
Display comments as (Linear | Threaded)

You can also do Ajax = Ajax.extend to use the same class + this.parent support.

#1 Valerio (Homepage) on 2007-01-17 14:55 (Reply)

I should have thought of that. Changed it. Thanks!

#2 Stefan (Homepage) on 2007-01-17 15:04 (Reply)

Ah, nice, thank you... I'd develop something like that for my old prototype framework, but yours fit a lot better with mootools ;-)

#3 Fabio Zendhi Nagao (Homepage) on 2007-03-10 21:15 (Reply)

Great stuff :-)

I was going to code something similar for my MOOdalBox, but your implementation is leaner and cleaner tham what I had in mind :-)

With your permission, I will include it in the upcoming release, and you will be mentioned both in the source code and on the homepage.

#4 Razvan Brates (Homepage) on 2007-03-14 06:38 (Reply)

You can sure use the ajax timeout script for MOOdalBox. I hereby declare, that it's in the public domain.

#4.1 Stefan Lange-Hegermannn (Homepage) on 2007-03-14 09:23 (Reply)

your code crash at ie7, i think you sholud not run 'this.parent();' before you addEvent.

that's my fix:

request: function()
{
    if (this.options.timeout) {
        this.timeoutTimer=window.setTimeout(this.callTimeout.bindAsEventListener(this), this.options.timeout);
        this.addEvent('onComplete',this.removeTimer);
    }
    this.parent();
},
#5 jerry sun on 2007-04-16 11:38 (Reply)

Nice! Here is a slightly modified version to work with Ajax.remote:

Json.Remote = Json.Remote.extend({
    send: function(){
    if (this.options.timeout) {
        this.timeoutTimer=window.setTimeout(this.callTimeout.bindAsEventListener(this), this.options.timeout);
        this.addEvent('onComplete', this.removeTimer);
    }
    this.parent();
    },
    callTimeout: function () {
        this.transport.abort();
        this.onFailure();
        if (this.options.onTimeout) {
            this.options.onTimeout();
        }
    },
    removeTimer: function() {
        window.clearTimeout(this.timeoutTimer);
    }
});
#6 Aubrey (Homepage) on 2007-10-13 04:47 (Reply)

nice!

#7 franky on 2008-02-20 10:38 (Reply)

Add Comment

You can use [geshi lang=lang_name [,ln={y|n}]][/lang] tags to embed source code snippets
Standard emoticons like :-) and ;-) are converted to images.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Markdown format allowed
 
 

View as PDF: This entry | This month | Full blog