Get return value from ajax call inside a function

Question

Below is the code that I am working on. As you can see, I created a variable called 'my_string', as a default, I want to call the get_result_data() function and store any return data on the variable 'my_string'. Then, once the user click the $('#button'), I want to display the stored data. But the problem is, I am always getting an unidentified error.

function get_result_data(){
    $.ajax({
        type: 'POST',
        url: 'ajax/get_result.php'
    }).done(function(data){
        return data;
    });
}

var my_string = get_result_data();


$('#button').click(function(){
    alert(my_string);
});

@elclanrs I thought SO would have suggested the dup question while creating this question itself :( — thefourtheye, Dec 26 '13 at 03:35
why do you need to store the function in my_string variable? just put the function inside the button click. get_result_data()! much better — zai, Dec 26 '13 at 03:36
This is just a small part of my entire project, I need to get this to work for specific purpose — user3135626, Dec 26 '13 at 03:38

Abdullah Jibaly · Answer 1 · 2013-12-26T03:41:45.460

2

Your get_result_data function does not return anything, which is why you're getting back undefined. Instead, try setting my_string from within the ajax callback:

var my_string;
function get_result_data(){
    $.ajax({
        type: 'POST',
        url: 'ajax/get_result.php'
    }).done(function(data){
        my_string = data;
    });
}

$('#button').click(function(){
    // MY_STRING MIGHT BE UNDEFINED
    alert(my_string);
});

Perhaps a better approach:

var response = $.ajax({
    type: 'POST',
    url: 'ajax/get_result.php'
});

$('#button').click(function(){
    response.done(function (data) {
        alert(data);
    });
});

edited Dec 26 '13 at 03:41

answered Dec 26 '13 at 03:36

Abdullah Jibaly

53,220
42
124
197

But I put return data; – user3135626 Dec 26 '13 at 03:37
Right, but there is no `return` statement in your `get_result_data` function, so there's nothing being returned when you call it. – Abdullah Jibaly Dec 26 '13 at 03:39
Then how would you display the return data once the button is clicked? Remember the ajax call is still inside of get_result_data() function – user3135626 Dec 26 '13 at 03:39
Follow the duplicate, your problem is explained in great detail. You don't return things in AJAX, you use callbacks. – elclanrs Dec 26 '13 at 03:40
1

@user3135626 Remember that the first A in AJAX stands for _asynchronous_. `get_result_data()` sends the AJAX request, then it returns without waiting for the response. The `.done()` function is called later, when the response arrives. – Barmar Dec 26 '13 at 03:42

score 0 · Answer 2 · answered Dec 26 '13 at 03:45

You should use callback way to do this.

function get_result_data(callback){
    $.ajax({
        type: 'POST',
        url: 'ajax/get_result.php'
    }).done(function(data){
        callback(data);
    });
}

get_result_data(function(my_string){
    $('#button').click(function(){
        alert(my_string);
    });
});

score 0 · Answer 3 · answered Dec 26 '13 at 03:56

in this way ,works

function get_result_data(){
    var res;
    $.ajax({
        type: 'POST',
        url: '/kuke/userBlog/getTudouVideoInf',
        async:false,
        data : {
            "temp" : "1",
            "video_id" : "111"
        },
        error : function(textStatus,errorThrown) {
            alert("textStatus:"+textStatus+"   errorThrown:"+errorThrown);
        }
    }).done(function(data){
        res=data;

    });
    return res;
}

Get return value from ajax call inside a function

3 Answers3