How to get response text from ajax callback in a variable using ExtJS

Question

I wonder if I can get the responseText from an Ext.Ajax.Request call in a variable. I've tried many ways and "hacks" without success.

Example:

In this case, I am trying to assign the responseText to the accStatus variable and I am always getting undefined (I know this is NOT the right way) but I want to know exactly how to handle this (the correct way) and return it in my function without problems and in a "simple" way (if possible) like the below code.

By the way, I am using Ext 4.2.0.

Is there a way to do something like this?

Ext.define('Util.AccountManager', { 

    singleton: true,

    getAccountStatus: function(id) {
        var accStatus;

        Ext.Ajax.request({
            url : 'rest/accounts',
            method : 'POST',
            params : {id: id},
            callback: function(o, s, r) {
                accStatus = r.responseText;
            }
        });

        return accStatus;
    }

});

Ext.onReady(function () {

    var id = '1234';
    var accStatus = Util.AccountManager.getAccountStatus(id);

    if(accStatus) {
        console.log(accStatus);
    }

});

If someone wants to help on this, you can use the following URLs for importing ExtJS:

I also made this jsfiddle just for "testing" (or at least trying because it is not possible to make ajax requests through this site).

http://jsfiddle.net/oscarj24/aE6fz/

Oscar Jara · Accepted Answer · 2014-02-04 15:21:07Z

3

Your getAccountStatus needs a callback so you can respond after the XHR finishes. AJAX is asynchronous so you cannot expect your success callback to be called before your call to getAccountStatus returns;

// Will never work unless you use synchronous AJAX (which you shouldn't
// because it would block the UI while the request is pending)
var accStatus = Util.AccountManager.getAccountStatus(id);

Do the following instead

Ext.define('Util.AccountManager', { 

    singleton: true,

    getAccountStatus: function(id, cb) {
        Ext.Ajax.request({
            url : 'rest/accounts',
            method : 'POST',
            // async: true, // This would make your return work, but don't do it
            params : {id: id},
            callback: function(o, s, r) {
                cb(r.responseText);
            }
        });

        // Code here runs before the callback above
    }    
});

Ext.onReady(function () {    
    var id = '1234';
    var accStatus = Util.AccountManager.getAccountStatus(id, function(status){
        console.log(status);
    });
});

edited Feb 4, 2014 at 15:21

Oscar Jara

14.1k10 gold badges64 silver badges94 bronze badges

answered Feb 4, 2014 at 0:17

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Oscar Jara Over a year ago

How can I assign it to accStatus variable when doing the callback? Do I need to just do return status; instead of console.log(accStatus); in order to get it? By the way, thanks for the explanation.

Ruan Mendes Over a year ago

@OscarJara by the time your callback is called, getAccountStatus has already returned (because it's asynchronous), that's why you're getting undefined. When the callback is called, you are setting that variable but it's never being used. You need to read up on asynchronous code to grasp the concept. You cannot turn an asynchronous operations (where you get the result from the callback) into a synchronous operation (where you get the result from the return value). Your code will work if you pass async: false to Ext.Ajax.request... but you shouldn't because it'll block the UI

Oscar Jara Over a year ago

Oh, I got the idea (is just a matter of analyzing it). I think it's ok that I can handle accStatus in the callback. Maybe I can isolate it in another function, thanks for your time Juan and for sharing the "right way". I am more familiar with jQuery and there are some tricks which I can't do in ExtJS (that's why I asked this question).

Ruan Mendes Over a year ago

@OscarJara This is not ExtJS specific. Remember that jQuery is also asynchronous where it uses XHR. You can't do function getSomething(){return $.ajax()}, you have to use callbacks. Again, you cannot wrap async code and try to make it look synchronous

Oscar Jara Over a year ago

Yes, I know that, one thing is "how ajax calls work" and other the Ext.Ajax.Request from ExtJS. I was trying to let your know that in jQuery there are more "hacks" and also some functions like .get() that allows you to get the response (different from ExtJS but a really good framework) thanks for your help.

|

Collectives™ on Stack Overflow

How to get response text from ajax callback in a variable using ExtJS

Example:

Is there a way to do something like this?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example:

Is there a way to do something like this?

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related