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, Dec 29 '10 at 15:04

SLaks · Accepted Answer · 2010-12-29T15:02:59.020

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 '10 at 15:02

answered Dec 29 '10 at 14:57

SLaks

868,454
176
1,908
1,964

4

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. – sholsinger Dec 29 '10 at 15:00
but what i should enter inside function(px) { <> } – Ghandhikus Dec 29 '10 at 15:05
1

@Sonny: Whatever you want. That's the callback that receives the value. – SLaks Dec 29 '10 at 15:08
@SLaks so i don't need to enter anything there? – Ghandhikus Dec 29 '10 at 15:11
@Sonny: If you don't want to do anything with the response, yes. Do you understand what this code does? – SLaks Dec 29 '10 at 15:15
1

@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. – SLaks Dec 29 '10 at 15:26
@SLaks ok i will do that but it'll cause much lags in my game is it any other way to do this like other js module like super_jquery.js – Ghandhikus Dec 29 '10 at 15:31
@Sonny: No. There is no magic escape hatch. No-one said that AJAX is easy. Why would that cause lag? – SLaks Dec 29 '10 at 15:32
@SLaks Because of much data i think. – Ghandhikus Dec 29 '10 at 15:34
@SLaks i made new question i think you will be interested http://stackoverflow.com/questions/4555508/get-all-values-from-mysql-then-make-variables – Ghandhikus Dec 29 '10 at 15:46

Dutchie432 · Answer 2 · 2010-12-29T15:02:17.113

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 '10 at 15:02

answered Dec 29 '10 at 14:56

Dutchie432

28,798
20
92
109

3

**Never** use `async: false`. – SLaks Dec 29 '10 at 14:57
sry i need other one to get value because i got 20 other variables to define – Ghandhikus Dec 29 '10 at 14:58
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 Dec 29 '10 at 15:00
@SLaks, was just re-pasting. Good catch. – Dutchie432 Dec 29 '10 at 15:02
That should be an object, not an array. – SLaks Dec 29 '10 at 15:15
An array **is** an object that is used for just this sort of thing. What are the advantages to using a custom object instead? – Dutchie432 Dec 29 '10 at 15:18

score 0 · Answer 3 · answered Dec 29 '10 at 14:59

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 '10 at 14:59

Suhumar

355
3
13

Ajax jquery async return value

3 Answers3

Linked

Related