Return value inside normal function that has Jquery function

Question

Returning value doesn't work, when returning inside Jquery function. When I return outside Jquery function it doesn't work good, because return doesn't wait for Jquery function, and giving error: Uncaught ReferenceError: result is not defined.

How can I solve this problem? Mby I should make Jquery function named count_with_min_max_val?

//counting precentage function   
function count_with_min_max_val(val, perc, min_val, min_val_limit, max_val, max_val_limit, action) {
    //ajax data
    var json_obj = {};
    json_obj.values = {
        "action": action,
            "value": val,
            "percent": perc,
            "min_val": min_val,
            "min_val_limit": min_val_limit,
            "max_val": max_val,
            "max_val_limit": max_val_limit

    };
    var json_obj = JSON.stringify(json_obj);

    $.post("pages/calc/calculator.php", {
        json_a: json_obj
    }).done(function (data) {
        result = data;
        alert(result); //that works
        return result; //doesn't return to main function                     
    });
    return result; //return doesnt wait for Jquery function to complete, and showing error
}

return statements do not work inside `ajax`. What exactly are you tryijng to achieve here ? May be you could assign the result to a hidden variable ? — karthikr, Nov 23 '13 at 11:05
Possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Frédéric Hamidi, Nov 23 '13 at 11:05
You can pass some function to `count_with_min_max_val` as a parameter and execute this function in ajax-callback. — u_mulder, Nov 23 '13 at 11:06

Adam Merrifield · Accepted Answer · 2013-11-23T11:32:22.473

Ajax calls are asynchronous. Add async: false

$.ajax({
    type: "POST",
    url: "pages/calc/calculator.php",
    async: false,
    data: {
        json_a: json_obj
    },
    success: function(data){
        result = data;
        return result;
    }
});

Also as pointed out in the comments async has been deprecated. Here is how to do it with ajax callbacks.

var result;
function ajaxCallback(response){
    result = response;
    console.log(response);
}

function count_with_min_max_val(val, perc, min_val, min_val_limit, max_val, max_val_limit, action){
    //ajax data
    var json_obj = {};
    json_obj.values = {
        "action": action,
        "value": val,
        "percent": perc,
        "min_val": min_val,
        "min_val_limit": min_val_limit,
        "max_val": max_val,
        "max_val_limit": max_val_limit
    };
    json_obj = JSON.stringify(json_obj);

    $.post("pages/calc/calculator.php", {
        json_a: json_obj
    }).done(ajaxCallback);
}

@u_mulder I've updated the answer to include both `async:false` and callbacks. Thanks. — Adam Merrifield, Nov 23 '13 at 22:13

score 1 · Answer 2 · answered Nov 23 '13 at 11:10

It's not possible because is an asynchronous call. So function in done() is executed after post is finished, and before the return of the main function.

A possible solution is pass a callback function as parameter. For example:

// Do something with result
function callback(result) {
alert(result);
}

function count_with_min_max_val(callback, val, perc, min_val, min_val_limit, max_val, max_val_limit, action) {
    //ajax data
    var json_obj = {};
    json_obj.values = {
        "action": action,
            "value": val,
            "percent": perc,
            "min_val": min_val,
            "min_val_limit": min_val_limit,
            "max_val": max_val,
            "max_val_limit": max_val_limit

    };
    var json_obj = JSON.stringify(json_obj);

    $.post("pages/calc/calculator.php", {
        json_a: json_obj
    }).done(function (data) {
        result = data;
        callback(result);
    });
}

score 0 · Answer 3 · answered Nov 23 '13 at 11:06

try something like this

    $.ajax({
        type: "POST",
        url: "pages/calc/calculator.php",
        async: false,
        data: { json_a: json_obj }
        })
        .done(function( msg ) {
            result = data;
            alert(result); //that works
            return result; //doesn't return to main function     
        });

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active

score 0 · Answer 4 · answered Nov 26 '13 at 13:26

Thank you very much for answers. Duo to your comments, that synchronous calls are out dated, and dangerous, because they can lock webbrowser. I decided to use function callback, after ajax call is complete.

(my code) (...)

$.post("pages/calc/calculator.php", {
   json_a: json_obj
}).done(function (data) {

   callback_function(data);

});

(...)

Thank you very much, you are experts!

Return value inside normal function that has Jquery function

4 Answers4