5 Replies - 2104 Views - Last Post: 06 September 2012 - 09:57 AM

#1 agent_logic  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 21-July 08

How to return a variable after AJAX call has finished?

Posted 05 September 2012 - 05:33 AM

Hi,

I'm working on a project that uses widespread AJAX calls. I'm stuck in one particular AJAX call where I need to assign the returned data to a variable. My code is below:

//ajax function
function ajaxCall(url, type, data, dataType, callback) {
    var type = typeof type !== 'undefined' ? type : "post";
    var dataType = typeof dataType !== 'undefined' ? dataType : "json";
    $.ajax({url: url, data: "data=" + data, type: type, dataType: dataType, success: function(d){
        if(type === "post") {	
            if(d.hasOwnProperty('success') === false) {
                callback(false, d); //passes error message
            }
            else {
                callback(d.success === "1", ""); //data was successfully posted
            }
        }
        else {
            callback(true, d); //pass any returned data from HTTP GET
        }
    }
    });
}

//function that gets data via ajax
function getData(cat_id) {
    var d = new Object();
    ajaxCall('http://localhost/fetch', 'get', cat_id, 'json', function(success, data){
        if(success) {
            d = data;
            console.log(d); //prints returned JSON object correctly in console
        }
    });
    return d; //<=== culprit?
}

var data = getData(19);
console.log(data[1].cat_name); //prints Uncaught TypeError: Cannot read property '1' of undefined in Chrome console
//in Firebug, it prints 'undefined'



I think this has to do with the fact that the ajaxCall() returns the variable "d" before the async call finishes. How can I make the function return only after the variable "d" has been assigned the returned data?

I tried:
function getData(cat_id) {
    var d = null;

    ajaxCall('http://localhost/fetch', 'get', cat_id, 'json', function(success, data){
        if(success) {
            d = data;
            console.log(d); //prints returned JSON object correctly in console
        }
    });

    while(d === null) {
        if(d !== null) {
            return d;
        }
    }
}



but this loop keeps running forever and the page does not even load. Any help would be greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: How to return a variable after AJAX call has finished?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3494
  • View blog
  • Posts: 10,072
  • Joined: 08-June 10

Re: How to return a variable after AJAX call has finished?

Posted 05 September 2012 - 06:41 AM

Quote

How can I make the function return only after the variable "d" has been assigned the returned data?

make a synchronous AJAX call.
Was This Post Helpful? 0
  • +
  • -

#3 agent_logic  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 21-July 08

Re: How to return a variable after AJAX call has finished?

Posted 05 September 2012 - 07:05 AM

View PostDormilich, on 05 September 2012 - 07:11 PM, said:

Quote

How can I make the function return only after the variable "d" has been assigned the returned data?

make a synchronous AJAX call.

Hey Dormilich,

Thanks for your reply! Wouldn't a synchronous call hang the browser? I have some JS functions that will be running while the AJAX call is being made, one of them being a setInterval(func(), 1000). Wouldn't the browser hang until the data is returned? Is there a way I can maintain the asynchronous behaviour AND assign and return the variable?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3494
  • View blog
  • Posts: 10,072
  • Joined: 08-June 10

Re: How to return a variable after AJAX call has finished?

Posted 05 September 2012 - 07:18 AM

View Postagent_logic, on 05 September 2012 - 04:05 PM, said:

Wouldn't a synchronous call hang the browser?

yes.

View Postagent_logic, on 05 September 2012 - 04:05 PM, said:

I have some JS functions that will be running while the AJAX call is being made, one of them being a setInterval(func(), 1000). Wouldn't the browser hang until the data is returned?

yes.

View Postagent_logic, on 05 September 2012 - 04:05 PM, said:

Is there a way I can maintain the asynchronous behaviour AND assign and return the variable?

no.
Was This Post Helpful? 0
  • +
  • -

#5 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5780
  • View blog
  • Posts: 12,596
  • Joined: 16-October 07

Re: How to return a variable after AJAX call has finished?

Posted 05 September 2012 - 07:31 AM

Why do you need to return it? You would reasonably need to process it. Can't you just call the code that processes it when you get your result?

You are thinking that you MUST have a return value from a particular function. This is a dead end. Forget it. Rather, understand that the return of an AJAX call is an event and that you will be processing that event.
Was This Post Helpful? 1
  • +
  • -

#6 agent_logic  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 21-July 08

Re: How to return a variable after AJAX call has finished?

Posted 06 September 2012 - 09:57 AM

View Postbaavgai, on 05 September 2012 - 08:01 PM, said:

Why do you need to return it? You would reasonably need to process it. Can't you just call the code that processes it when you get your result?

Ah yes, that is what I ended up doing in the end. I guess I was so engrossed in trying to figure out a way to return the value that I forgot to think of other, simpler ways of getting the job done. Thanks for your reply!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1