jQuery AJAX. Return value is undefined?

Question

I have that code:

var s, d, p = '';

$.ajax(
    {
        type: "POST",
        url: ajaxurl,
        data: {action: "get_info"},
        success: function(r)
        {
            // r contain that json data
            // {"s":"long-string","d":"string","p":"string"}
            // That served from the server with that header
            //
            // header('Cache-Control: no-cache, must-revalidate'); 
            // header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
            // header('Content-type: application/json');

            d = r.d;
            s = r.s;
            p = r.p;
        }
    }
);

// And here console return s as undefined
console.log(s);

Any idea on what's going wrong with that ?

Why don't you put console.debug(r) at the first point in the success callback and see what returns. — Ben Everard
– Ben Everard, Commented Oct 25, 2011 at 9:33
As an aside, did you know variables s and d will be undefined because of the way you've declared them? jsfiddle.net/beneverard/KdDVe — Ben Everard
– Ben Everard, Commented Oct 25, 2011 at 10:00

njr101 · Accepted Answer · 2011-10-25 09:39:20Z

The $.ajax() call simply starts the ajax operation. The code then falls through to your console.log statement but the ajax call hasn't returned yet. Hence the value of s has not yet been set.

At some point later the ajax call returns your results and at that point your call back is fired. So if you want to refer to the value that is returned, you should reference the variable s inside the callback.

The better way to do this is normally like this:

$.ajax(
    {
        type: "POST",
        url: ajaxurl,
        data: {action: "get_info"},
        success: function(r)
        {

            s = r.s;

            // Do something with s here...
        }
    }
);

If you really need to, you can reference s outside of the callback but if you do, you need to put some mechanism in place to make sure that s has already been initialised (i.e. that your ajax call has already returned). This introduces other complexities such as synchronisation and error handling and can make your program flow rather unreliable.

reko_t · Accepted Answer · 2011-10-25 09:33:06Z

2

The reason is because when you call $.ajax(...); it returns immediately. The success property specifies a callback that gets called when the AJAX request finishes, and s is only populated there; it's undefined before that.

So basically don't do anything with s before the success callback is launched.

answered Oct 25, 2011 at 9:33

reko_t

56.6k10 gold badges92 silver badges77 bronze badges

Comments

Ross Dargan · Accepted Answer · 2011-10-25 09:34:46Z

The issue is you think the code executes in the way you have it laid out. It's actually symatically identical to:-

var s, d, p = '';
// And here console return s as undefined
console.log(s);
$.ajax(
    {
        type: "POST",
        url: ajaxurl,
        data: {action: "get_info"},
        success: function(r)
        {
            // r contain that json data
            // {"s":"long-string","d":"string","p":"string"}
            // That served from the server with that header
            //
            // header('Cache-Control: no-cache, must-revalidate'); 
            // header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
            // header('Content-type: application/json');

            d = r.d;
            s = r.s;
            p = r.p;
        }
    }
);

What you probably want is:-

var s, d, p = '';

$.ajax(
    {
        type: "POST",
        url: ajaxurl,
        data: {action: "get_info"},
        success: function(r)
        {
            // r contain that json data
            // {"s":"long-string","d":"string","p":"string"}
            // That served from the server with that header
            //
            // header('Cache-Control: no-cache, must-revalidate'); 
            // header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
            // header('Content-type: application/json');

            d = r.d;
            s = r.s;
            p = r.p;
            // And here console return s as undefined
           console.log(s);
        }
    }
);

Muhammad Haseeb Khan · Accepted Answer · 2011-10-25 09:39:47Z

1

Try specifying data type Like type: "POST", url: ajaxurl, dataType: 'json', data: {action: "get_info"},...

answered Oct 25, 2011 at 9:39

Muhammad Haseeb Khan

8939 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX. Return value is undefined?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related