CODEWITHSUNDEEP
jqueryfunctionreturn-value
jq beginner
jq beginner

Reputation: 1070

return value from jquery function not working

i'm using an ajax function to return a value so i can save it in a variable and use it anywhere but it's not working i get a message : undefined

function getData(){
    var ajax = false;
    ajax = new XMLHttpRequest()
    ajax.open("GET","ajax.php");
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){
            var test = ajax.responseText;
            return test ;
        }
    }
    ajax.send(null);
}

$(document).ready(function(e) {
    var n = getData();
    alert(n);
});

Upvotes: 0

Views: 2643

Answers (2)

grammar
grammar

Reputation: 871

Firstly in your example the function getData() does not actually return anything. You are making an AJAX request, and when the AJAX request is successful you say return data, but the getData() function itself does not return anything. You have a function that returns something (a child function) inside of another function (the parent function). The parent function, which is the function that you are actually calling, doesn't have any return value. This is why you are always seeing "undefined" when you try to alert the result of getData().

Like the commenters above said, AJAX stands for Asynchronous Javascript and XML, meaning that your request to get data runs independently of everything else in your script. This is one of the reasons why we have events, so you can wait until things have happened before trying to do something with its result.

In your example, you are already listening to the onreadystatechange event with this:

ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status == 200){
        var test = ajax.responseText;
        return test ;
    }
}

What you need to do is wait until the request is complete before trying to manipulate the data that was returned from the AJAX request. If you store the variable test outside of the getData function, then it will be available to other functions throughout your script. When the AJAX request was successful, then you can store the data returned in test and call another function that does stuff with test.

Here's some code to show you what I mean:

// Keep "test" globally outside of the scope of getData
// This makes "test" available throughout the rest of the script
var test;


function getData(){

    var ajax = false;
    ajax = new XMLHttpRequest()
    ajax.open("GET","ajax.php");
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4 && ajax.status == 200){

            // This is where we know that the AJAX request has completed
            // so we know we have the data. Store the data in the "test"
            // variable, and call another function here that will do something
            // with "test" - this way "test" won't be undefined!
            test = ajax.responseText;
            doNextStep();
        }
    }

    ajax.send(null);
}

// This new function I've introduced won't get called until
// the Ajax request was successful.
function doNextStep() {
    alert( test );
}

$(document).ready(function(e) {
    getData();
});

Hope this helps!

Upvotes: 0

Nickolas
Nickolas

Reputation: 101

Try:

function getData() {
    return $.ajax({
        type: "GET",
        url: "ajax.php",
        async: false,
    }).responseText;
}

$(document).ready(function(e) {
    var n = getData();
    alert(n);
});

Upvotes: 1

Related Questions