Ajax jquery async return value

Question

how can i make this code to return the value without freezing the browser.
You can rewrite this with new method of course.

function get_char_val(merk)
{  
    var returnValue = null;
    $.ajax({   
                type:       "POST",
                async:      false,   
                url:            "char_info2.php",   
                data:   { name: merk },   
                dataType: "html",  
                success:    function(data)
                                    {
                                        returnValue = data;
                                    } 
        }); 
    return returnValue;
}
var px= get_char_val('x');
var py= get_char_val('y');

EDIT: i need to have at least 20 variables get from php file at other times.

I've seen this question (or some variant) of it countless times. There must be an endless piles of duplicates. If only people could read a little more about programming with asynchronous events before trying to using ajax or any other async api/language... — Jakob
– Jakob, Commented Dec 29, 2010 at 15:04

SLaks · Accepted Answer · 2010-12-29 15:02:59Z

14

This is not possible.
Javascript runs on the UI thread; if your code waits for the server to reply, the browser must remain frozen.

Instead, you need to return the value using a callback:

function get_char_val(merk, callback)
{  
    var returnValue = null;
    $.ajax({   
                type:       "POST",
                url:            "char_info2.php",   
                data:   { name: merk },   
                dataType: "html",  
                success:    function(data) {
                    callback(data);
                } 
        }); 
}

get_char_val('x', function(px) { ... });
get_char_val('y', function(py) { ... });

Note that the two callbacks will run in an unpredictable order.

You should modify your design so that you can get all twenty values in a single AJAX request.
For example, you can take a comma-separated list of values, and return a JSON object like { x: "...", y: "..." }.

edited Dec 29, 2010 at 15:02

answered Dec 29, 2010 at 14:57

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

10 Comments

sholsinger Over a year ago

Correct, you cannot technically use a return value in an asynchronous request because the program flow has already passed the point of a "return" from the first method by the time the response arrives.

Ghandhikus Over a year ago

but what i should enter inside function(px) { <<here>> }

SLaks Over a year ago

@Sonny: Whatever you want. That's the callback that receives the value.

Ghandhikus Over a year ago

@SLaks so i don't need to enter anything there?

SLaks Over a year ago

@Sonny: That's because it's asynchronous. There is no magic escape hatch; you need to do everything in the callbacks. Changing the design to use a single AJAX request will make it much simpler.

|

Dutchie432 · Accepted Answer · 2010-12-29 15:02:17Z

1

You can not make variable assignments this way (async). you must set the variables in the success handler.

variableArray = new Array(); 

get_char_val('x');
get_char_val('y');

function get_char_val(merk)
{  
    var returnValue = null;
    $.ajax({   
        type:       "POST",
        url:            "char_info2.php",   
        data:   { name: merk },   
        dataType: "html",  
        success:    function(data)
            {
                variableArray[merk] = data;
            } 
    }); 
}

Once all of the retrievals are finished you can access the x and y variables by using variableArray[x] and variableArray[y]

edited Dec 29, 2010 at 15:02

answered Dec 29, 2010 at 14:56

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

6 Comments

SLaks Over a year ago

Never use async: false.

Ghandhikus Over a year ago

sry i need other one to get value because i got 20 other variables to define

Dutchie432 Over a year ago

Then you'll need to come up with an array (perhaps with keys such as px and py) and have the success handler manage that like: variableArray[merk] = data;

Dutchie432 Over a year ago

@SLaks, was just re-pasting. Good catch.

SLaks Over a year ago

That should be an object, not an array.

|

Suhumar · Accepted Answer · 2010-12-29 14:59:19Z

0

This may not be what you are expecting but you can set async: true if you dont want pause in the browser and so what you want to do with px on success

answered Dec 29, 2010 at 14:59

Suhumar

4053 silver badges14 bronze badges

Collectives™ on Stack Overflow

Ajax jquery async return value

3 Answers 3

10 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related