current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

I am trying to have a function grab an object from a php file on another page. I'm using the jQuery ajax function to to do the json grab, which is working correctly. The issue is when I try to return that object from the function.

The first time I log the object (from within the success function) it is correct in the console, but the returned object from the function getGantt() logs as "undefined".

How do I get this object out of the function?

My code:

    function getGantt(requestNumber){
        var ganttObject;
        $.ajax({
               type: "POST",
               url: "get_gantt.php",
               data: {request_number: requestNumber},
               success: function(returnValue){
                     ganttObject = $.parseJSON(returnValue);
                    console.log(ganttObject); //this logs a correct object in the console

                }
        });
        return ganttObject;
    }

    $(function(){ //document ready function

        var requestNumber = $('#request_number').text();

        var ganttObject = getGantt(requestNumber);
        console.log(ganttObject); //this logs "undefined"

    }); //end document ready function
share|improve this question
3  
you are returning a variable before ajax callback gets to set the ganttObject. –  kjy112 Feb 3 '11 at 20:46
    
AJAX is runs asynchronously, your getGantt function doesn't get the value until after the AJAX process is complete, which is after the return has happened. You need to restructure your programming to (a) use returnValue in the success function (b) store returnValue in a global/object variable that's accessible later (causes issues with the triggering/waiting process required) –  Rudu Feb 3 '11 at 20:50
    
Thanks for all the answers everyone; stackoverflow is insanely fast. Three good answers in under 10 minutes! –  Zak Henry Feb 3 '11 at 20:59

3 Answers 3

up vote 6 down vote accepted

The A in Ajax is an important part of the acronym. Asynchronous JavaScript and XML is asynchronous.

$.ajax({success:someFunction}) means Make an HTTP request and when the response arrives, run someFunction

return ganttObject runs before the response arrives.

You should do anything you want to do with the data inside someFunction and not try to return data to the calling function.

share|improve this answer
1  
LOL love the A in Ajax is an important part of the acronym...going to use that next time. –  kjy112 Feb 3 '11 at 20:52
    
I should probably add that the X isn't important ;) –  Quentin Feb 3 '11 at 20:52
    
Thanks, I had completely forgotten about ajax being taken out of normal flow. This answers my question completely. –  Zak Henry Feb 3 '11 at 20:57
    
Dorward - not just not important, but misleading :) –  Rudu Feb 3 '11 at 21:12
    
The A is important, but the X is not, now that most people use JSON instead of XML –  Juan Mendes Apr 3 '12 at 18:13
up vote 1 down vote

The A in AJAX stands for asynchronous. So the call immediately returns and as soon as it finishes, the success callback is called.

So, simply change your code to use a callback:

function getGantt(requestNumber, callback) {
    var ganttObject;
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "get_gantt.php",
        data: {request_number: requestNumber},
        success: function(returnValue){
            callback(returnValue);
        }
    });
}

$(function() {

    var requestNumber = $('#request_number').text();

    var ganttObject = getGantt(requestNumber, function(ganttObject) {
        console.log(ganttObject);
    });

});

Btw, I've also removed this parseJSON stuff - setting dataType to json does the job and is less dirty.

share|improve this answer
    
Thanks for the tip, I had missed that option in the docs –  Zak Henry Feb 3 '11 at 21:00
up vote 0 down vote

I know why it's not returning it at least. The ganttObject may be in the same scope, but the success function is ultimately running in the readyState callback from the XMLHTTP object, so it's on a different thread than the getGantt function. Can you make the $(function(){... code apart of your success function?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.