[FIXED-1251] Ext.data.Connection.request doesn't support timeout:0

[juanjoluna]

Hello, I've searched for an answer to this question in the forum but with no luck.

I want to make an Ajax call wich starts a long (up to half an hour) process on the server. It obviously makes a timeout and shows a message, so I want the Extjs page to ignore the timeout. I've tried to set the timeout option to 0 or -1 but it stills shows the message.

An alternate solution would be an option of Ext.Ajax.request() to forgive the call after it is made. I've tried to not setting any success or failure callbacks but it still shows the timeout message.

I don't know right now how to make the server to send a response to the Ajax call and continue with the process (I'm in a big company and don't know the details of the Spring server part)

Here is the code of the Ajax call

Ext.Ajax.request({

    url: 'blahblah',

    timeout: -1,

    params: {
        'blahblah': blah,
        'blahblah': blah
    }
});

Any help is appreciated. Thanks in advance

[Condor]

This is a small bug. Specifying timeout:0 should mean no timeout, but Ext.data.Connection is using the default timeout instead.

Patch:

(function(){
    var BEFOREREQUEST = "beforerequest",
        UNDEFINED = undefined,
        POST = 'POST',
        GET = 'GET',
        WINDOW = window;
    Ext.override(Ext.data.Connection, {
        request : function(o){
            var me = this;
            if(me.fireEvent(BEFOREREQUEST, me, o)){
                if (o.el) {
                    if(!Ext.isEmpty(o.indicatorText)){
                        me.indicatorText = '<div class="loading-indicator">'+o.indicatorText+"</div>";
                    }
                    if(me.indicatorText) {
                        Ext.getDom(o.el).innerHTML = me.indicatorText;
                    }
                    o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) {
                        Ext.getDom(o.el).innerHTML = response.responseText;
                    });
                }
                var p = o.params,
                    url = o.url || me.url,
                    method,
                    cb = {success: me.handleResponse,
                          failure: me.handleFailure,
                          scope: me,
                          argument: {options: o},
                          timeout : Ext.num(o.timeout, me.timeout)
                    },
                    form,
                    serForm;
                if (Ext.isFunction(p)) {
                    p = p.call(o.scope||WINDOW, o);
                }
                p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);
                if (Ext.isFunction(url)) {
                    url = url.call(o.scope || WINDOW, o);
                }
                if((form = Ext.getDom(o.form))){
                    url = url || form.action;
                     if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) {
                         return me.doFormUpload.call(me, o, p, url);
                     }
                    serForm = Ext.lib.Ajax.serializeForm(form);
                    p = p ? (p + '&' + serForm) : serForm;
                }
                method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);
                if(method === GET && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                    var dcp = o.disableCachingParam || me.disableCachingParam;
                    url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime()));
                }
                o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});
                if(o.autoAbort === true || me.autoAbort) {
                    me.abort();
                }
                if((method == GET || o.xmlData || o.jsonData) && p){
                    url = Ext.urlAppend(url, p);
                    p = '';
                }
                return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o));
            }else{
                return o.callback ? o.callback.apply(o.scope, [o,UNDEFINED,UNDEFINED]) : null;
            }
        }
    });
})();

[juanjoluna]

Thanks for the quick response.

I can put that function replacement in my code, right? I'll try that.

[juanjoluna]

I'm sorry but it doesn't work.

I've put your code at the begginning of my javascript file.

The Ajax petition is not taking place (I can't see it in Firebug)
Also, a grid I have in the same page doesn't load neither, it keeps with the loading icon animation. I can't see its Ajax petition neither in Firebug.

I can see with Firebug that the correct value is taken in the line

timeout : Ext.num(o.timeout, me.timeout)

That is, 30 seconds for the grid and 0 for the 'Server process' petition.

Just removing your code, all is working again.

Hope it has an easy solution!

Regards,
Juanjo

[Condor]

Which Ext version are you using? It could be that you need a different patch (this one is based on Ext 3.2.2).

[juanjoluna]

Version 3.0.0

If you can give me a patch for this version I'll be very grateful!

[Condor]

Ext.data.Connection had a lot of private methods in Ext 3.0.0. This makes the override really ugly:

(function(){
    var BEFOREREQUEST = "beforerequest",
        REQUESTCOMPLETE = "requestcomplete",
        REQUESTEXCEPTION = "requestexception",
        UNDEFINED = undefined,
        LOAD = 'load',
        POST = 'POST',
        GET = 'GET',
        WINDOW = window;
    function handleResponse(response){
        this.transId = false;
        var options = response.argument.options;
        response.argument = options ? options.argument : null;
        this.fireEvent(REQUESTCOMPLETE, this, response, options);
        if(options.success){
            options.success.call(options.scope, response, options);
        }
        if(options.callback){
            options.callback.call(options.scope, options, true, response);
        }
    }
    function handleFailure(response, e){
        this.transId = false;
        var options = response.argument.options;
        response.argument = options ? options.argument : null;
        this.fireEvent(REQUESTEXCEPTION, this, response, options, e);
        if(options.failure){
            options.failure.call(options.scope, response, options);
        }
        if(options.callback){
            options.callback.call(options.scope, options, false, response);
        }
    }
    function doFormUpload(o, ps, url){
        var id = Ext.id(),
            doc = document,
            frame = doc.createElement('iframe'),
            form = Ext.getDom(o.form),
            hiddens = [],
            hd,
            encoding = 'multipart/form-data',
            buf = {
                target: form.target,
                method: form.method,
                encoding: form.encoding,
                enctype: form.enctype,
                action: form.action
            };
        Ext.apply(frame, {
            id: id,
            name: id,
            className: 'x-hidden',
            src: Ext.SSL_SECURE_URL
        });
        doc.body.appendChild(frame);
        if(Ext.isIE){
           document.frames[id].name = id;
        }
        Ext.apply(form, {
            target: id,
            method: POST,
            enctype: encoding,
            encoding: encoding,
            action: url || buf.action
        });
        ps = Ext.urlDecode(ps, false);
        for(var k in ps){
            if(ps.hasOwnProperty(k)){
                hd = doc.createElement('input');
                hd.type = 'hidden';
                hd.value = ps[hd.name = k];
                form.appendChild(hd);
                hiddens.push(hd);
            }
        }
        function cb(){
            var me = this,
                r = {responseText : '',
                     responseXML : null,
                     argument : o.argument},
                doc,
                firstChild;
            try{
                doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
                if(doc){
                    if(doc.body){
                        if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){
                            r.responseText = firstChild.value;
                        }else{
                            r.responseText = doc.body.innerHTML;
                        }
                    }
                    r.responseXML = doc.XMLDocument || doc;
                }
            }
            catch(e) {}
            Ext.EventManager.removeListener(frame, LOAD, cb, me);
            me.fireEvent(REQUESTCOMPLETE, me, r, o);
            function runCallback(fn, scope, args){
                if(Ext.isFunction(fn)){
                    fn.apply(scope, args);
                }
            }
            runCallback(o.success, o.scope, [r, o]);
            runCallback(o.callback, o.scope, [o, true, r]);
            if(!me.debugUploads){
                setTimeout(function(){Ext.removeNode(frame);}, 100);
            }
        }
        Ext.EventManager.on(frame, LOAD, cb, this);
        form.submit();
        Ext.apply(form, buf);
        Ext.each(hiddens, function(h) {
            Ext.removeNode(h);
        });
    }
    Ext.override(Ext.data.Connection, {
        request : function(o){
            var me = this;
            if(me.fireEvent(BEFOREREQUEST, me, o)){
                if (o.el) {
                    if(!Ext.isEmpty(o.indicatorText)){
                        me.indicatorText = '<div class="loading-indicator">'+o.indicatorText+"</div>";
                    }
                    if(me.indicatorText) {
                        Ext.getDom(o.el).innerHTML = me.indicatorText;
                    }
                    o.success = (Ext.isFunction(o.success) ? o.success : function(){}).createInterceptor(function(response) {
                        Ext.getDom(o.el).innerHTML = response.responseText;
                    });
                }
                var p = o.params,
                    url = o.url || me.url,
                    method,
                    cb = {success: handleResponse,
                          failure: handleFailure,
                          scope: me,
                          argument: {options: o},
                          timeout : Ext.num(o.timeout, me.timeout)
                    },
                    form,
                    serForm;
                if (Ext.isFunction(p)) {
                    p = p.call(o.scope||WINDOW, o);
                }
                p = Ext.urlEncode(me.extraParams, Ext.isObject(p) ? Ext.urlEncode(p) : p);
                if (Ext.isFunction(url)) {
                    url = url.call(o.scope || WINDOW, o);
                }
                if((form = Ext.getDom(o.form))){
                    url = url || form.action;
                     if(o.isUpload || /multipart\/form-data/i.test(form.getAttribute("enctype"))) {
                         return doFormUpload.call(me, o, p, url);
                     }
                    serForm = Ext.lib.Ajax.serializeForm(form);
                    p = p ? (p + '&' + serForm) : serForm;
                }
                method = o.method || me.method || ((p || o.xmlData || o.jsonData) ? POST : GET);
                if(method === GET && (me.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                    var dcp = o.disableCachingParam || me.disableCachingParam;
                    url = Ext.urlAppend(url, dcp + '=' + (new Date().getTime()));
                }
                o.headers = Ext.apply(o.headers || {}, me.defaultHeaders || {});
                if(o.autoAbort === true || me.autoAbort) {
                    me.abort();
                }
                if((method == GET || o.xmlData || o.jsonData) && p){
                    url = Ext.urlAppend(url, p);
                    p = '';
                }
                return (me.transId = Ext.lib.Ajax.request(method, url, cb, p, o));
            }else{
                return o.callback ? o.callback.apply(o.scope, [o,UNDEFINED,UNDEFINED]) : null;
            }
        }
    });
})();

[juanjoluna]

It works! Thank you so much!!!!

How can I edit the thread's title? To put [solved]...can't find the option

[Animal]

FIY, a simpler fix would be to use

timeout: new Number(0)

[Condor]

No, that doesn't work. This not only causes this timeout to be used by Ext.data.Connection, but it also makes Ext.lib.Ajax use this timeout value in setTimeout (which the OP was trying to avoid).