0

I would like to dispay a simple waiting animation while getting data from the server using an AJAX request. This is the code of the request :

new Ajax.Request(prefix + 'modelling/', {
                method: 'get',
                asynchronous: false,
                requestHeaders: {
                    "Accept":"application/json"
                },
                parameters: {
                    id: 'getcaplist',

                },
                encoding: 'UTF-8',
                onSuccess: function(response){
                    console.log('response : ', response);


                    var resJSON = response.responseText.evalJSON();
                    console.log('resJSON: ', resJSON);

                    for(var I = 0; I < resJSON.length; ++i){
                      //do something with obj[i]
                        for(var ind in resJSON[i]) {
                        console.log(ind);
                            for(var vals in resJSON[i][ind]){
                            console.log(vals, resJSON[i][ind][vals]);
                            capabilities.push(resJSON[i][ind][vals]);

                            }
                        }
                    }
                    console.log('capabilities', capabilities);

                }.bind(this),

                onException: function(){
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, 'Exception while getting capabilities list').setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }.bind(this),
                onFailure: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this),
                on401: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();
                                        }).bind(this),
                on403: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this)
            });

The waiting animation should be hided, when passing to the onSucess function.

5
  • 2
    prior to your ajax request call a wheel or progress library.show(); Then in your onSuccess block do .hide(). Simple as that Aug 20, 2015 at 20:47
  • any example please ? I didn't understand what you mean
    – Khouloud
    Aug 20, 2015 at 20:50
  • 1
    asynchronous: false, will make it impossible for anything to animate during the ajax request.
    – Kevin B
    Aug 20, 2015 at 20:56
  • @KevinB - HAHAH! I just noticed that. Please change to true Khouloud. It defeats the whole purpose of "A"jax Aug 20, 2015 at 21:04
  • can you please add Signavio tag ?
    – Khouloud
    Aug 21, 2015 at 11:09

2 Answers 2

0

Just change asynchronous: false

-2

You have to use the onLoading method like this:

new Ajax.Request(prefix + 'modelling/', {
                method: 'get',
                asynchronous: false,
                requestHeaders: {
                    "Accept":"application/json"
                },
                parameters: {
                    id: 'getcaplist',

                },
                encoding: 'UTF-8',
                onLoading: function(){
                    // DO SOMETHING HERE
                },
                onSuccess: function(response){
                    console.log('response : ', response);


                    var resJSON = response.responseText.evalJSON();
                    console.log('resJSON: ',resJSON);

                    for(var i = 0; i < resJSON.length; ++i){
                      //do something with obj[i]
                        for(var ind in resJSON[i]) {
                        console.log(ind);
                            for(var vals in resJSON[i][ind]){
                            console.log(vals, resJSON[i][ind][vals]);
                            capabilities.push(resJSON[i][ind][vals]);

                            }
                        }
                    }
                    console.log('capabilities', capabilities);

                }.bind(this),

                onException: function(){
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, 'Exception while getting capabilities list').setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }.bind(this),
                onFailure: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this),
                on401: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();
                                        }).bind(this),
                on403: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this)
            });

have a look at the documentation. onLoading maps to the Initialize stage in the XHR's life cycle. Therefore, here would be a proper place to initialize a loading gif or similar.

5
  • i'm afraid there's nothing you can do in any of the ajax events that will result in anything rendering in the browser before the synchronous ajax request is sent.
    – Kevin B
    Aug 20, 2015 at 20:59
  • Thanks! That was a to fast copy paste from the prototypejs site. It is corrected. Aug 20, 2015 at 21:01
  • The only possible way would be to wrap the entire ajax request in a setTimeout, but that will likely break other code that relies on the request being sent synchronously.
    – Kevin B
    Aug 20, 2015 at 21:02
  • onLoading maps to the Initialize stage in the XHR's life cycle. Therefore, it should be equivalent to beforeSend in jQuery, and to my knowledge that is the best place to show an loading gif no? Aug 20, 2015 at 21:03
  • Yes, but the problem is the callstack will not clear until long after the ajax request has completed. Until the callstack clears, the browser will be unable to render anything. If this were an Asynchronous request, your answer would be correct.
    – Kevin B
    Aug 20, 2015 at 21:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.