Jquery ajax request with async:true does not return value

Question

With async:set to false, the function is returning the correct value. However it blocks the browser. I've tried to add callbacks but it not returning the correct value!

function find_route(array_bustops){
        var myresults;
            $.ajax({

            type: 'POST',
                async: true,  //with async:false it works
            url: 'find_routenum.php',

            data:{

                array_bustops:JSON.stringify(array_bustops)

            },
            dataType:'json', //html,xml

            success: function(my_results){

                myresults=my_results;


            },

            error:function(x,e){
                if(x.status==0){
                alert('You are offline!!\n Please Check Your Network.');
                }else if(x.status==404){
                alert('Requested URL not found.');

            }


        });

        return myresults;
    }

WITH CALLBACK:

function find_route(array_bustops,callback){
        var myresults;
            $.ajax({

            type: 'POST',
                async: true,  //with async:false it works
            url: 'find_routenum.php',

            data:{

                array_bustops:JSON.stringify(array_bustops)

            },
            dataType:'json', //html,xml

            success: function(my_results){

                callback(array_bustops,my_results)


            },

            error:function(x,e){
                if(x.status==0){
                alert('You are offline!!\n Please Check Your Network.');
                }else if(x.status==404){
                alert('Requested URL not found.');

            }


        });

        return myresults;
    }
    function find_route2(myresults){
           return myresults;
    }

And then i call the function as follows:

arr_one=find_route(arr,find_route2)

but arr_one returns undefined.

EDIT: it still is not working with async:set to true

Does "Synchronous Ajax Request" cause some slow down in code execution? — j.b
– j.b, Commented Mar 8, 2012 at 14:17
jens, what happens is that the main executing thread gets locked, js is not able to do anything else while it's waiting for the ajax request to come back. — aziz punjani
– aziz punjani, Commented Mar 8, 2012 at 14:23
i've changed to code to function find_bus_route2(array_bustops,my_results){ return my_results; } but arr_one is still undefined! — j.b
– j.b, Commented Mar 8, 2012 at 14:28

elmuchacho · Accepted Answer · 2012-03-08 16:06:16Z

3

arr_one=find_route(arr,find_route2)

this got nothing to do with async but with the architecture of your code.

you declare myresults in the scope of find_route, when you call find_route the function return the value of myresults who is undefined because you delcare it only.

Try to declare var myresults='somevalue'; in your function

Now your function return 'somevalue'

This happen because the call to ajax method will not stop the function execution and the success method will be executed way after find_route is called and returned just put a console.log in there you'll see that it will get log eventually when the success is called.

It work when async false is set because async false as you discover stop the function execution from returning before the ajax call is back

Edit: possible solution

function DataListener(val){
    this.val = val;
    this.remoteFetch();
}

DataListener.prototype.set = function(val){
    this.val = val;
    this.notifyListener(val)
}
DataListener.prototype.get = function(val){
    return this.val;
}

DataListener.prototype.remoteFetch = function(){
    $.ajax({
        success:$.proxy(this, 'set')
    })
}

var arr_one = new DataListener('somevalue');
alert(arr_one.get());// alert somevalue

function doSomething(arr_one_value){
    alert(arr_one_value); // the new value set from the ajax call   
}

arr_one.addListener(doSomething);

edited Mar 8, 2012 at 16:06

answered Mar 8, 2012 at 14:13

elmuchacho

4253 silver badges8 bronze badges

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

3 Comments

j.b Over a year ago

You're right but then instead of returning undefined. arr_one will have as value "somevalue". please have a look at my code jsfiddle.net/YtkCh

j.b Over a year ago

hmm the callback function find_route2 is getting the correct value but how do i return the value to arr_one? I think the problem comes here arr_one=find_route(arr,find_route2) find_route 2 is returning the correct value. but how do i assign that value to arr_one?

j.b Over a year ago

Any idea what i should do? i'm really stuck here!

aziz punjani · Accepted Answer · 2012-03-08 14:12:41Z

1

At a glance, you are passing two arguments to your callback, but in your actual callback function you only accept one.

callback(array_bustops,my_results); 

// your callback function  
function find_route2(myresults){
       return myresults;
}

Try passing just the results to the argument.

callback(my_results);

answered Mar 8, 2012 at 14:12

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

6 Comments

j.b Over a year ago

oops sorry i made the modification but ran the code with async set to false; I'm totally lost, it still not working

aziz punjani Over a year ago

jens, elmuchacho has the correct answer. You will need to restructure your code. JS will not wait for the response from the ajax request, you will have to put the code you want executed after the ajax into the callback function.

j.b Over a year ago

here is my code jsfiddle.net/YtkCh. alert find1 is returning undefined. alert find2 is returning some value

aziz punjani Over a year ago

jens the fiddle is incomplete ?

aziz punjani Over a year ago

jens, what it really comes down to is, what do you want to do with the response ?

|

Igor L. · Accepted Answer · 2013-07-17 14:02:49Z

function find_route(array_bustops){
            $.ajax({

            type: 'POST',
                async: true,  //with async:false it works
            url: 'find_routenum.php',

            data:{

                array_bustops:JSON.stringify(array_bustops)

            },
            dataType:'json', //html,xml

            success: function(my_results){

                // HOW ABOUT PUTTING THE NEXT DESIRED FUNCTIONALITY HERE? //
                return my_results 

            },

            error:function(x,e) {
                if(x.status==0) {
                    alert('You are offline!!\n Please Check Your Network.');
                }else if(x.status==404) {
                    alert('Requested URL not found.');
                }
                //AND THE DUMMY RETURN VALUE OF THE FUNCTION IS HERE//
                return FALSE;
            }


        });

        return myresults;
    }

Collectives™ on Stack Overflow

Jquery ajax request with async:true does not return value

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related