Javascript callbacks - passing variables to them

Question

I can't get the following code to work. Assume that the ajax call works, and msg['username'] is preset to 'john'. I think I am getting confused with how to pass variables to my callback. Edit: I think my main confusion was how to get the 'msg' variable out of Ajax. It looks like Ajax has a 'hard wired' success method which is pretty much compulsory to use if you want to subsequently use the data from the ajax query- and that method is the only one that can access the result of the ajax call. Here's the code:

<script>
   $(document).ready(function(){
        function freedome(horace){
           $.ajax({
               url: "RESPONDERdetails.php",
               type: "GET",           
               dataType: "json",
               data:{thing:31}
           });    
           horace(msg);
        } 

        function callbacker(msg){
            alert("I am callback");
            name = msg["username"];
            alert(name);
        }

        freedome(callbacker(msg));
        });
</script>

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — nem035, Oct 21 '16 at 14:31
[`$.ajax`](http://api.jquery.com/jquery.ajax/) has a `success` option for running a callback. Your `horace` needs to be there. Also, you need to just pass `callbacker` to `freedome`. Right now, you're attempting to call `callbacker` by passing it some non-existent `msg` value then pass *it's return value* to `freedome`. — Mike Cluck, Oct 21 '16 at 14:33

score 1 · Answer 1 · answered Oct 21 '16 at 14:33

1

You just want to use freedome(callbacker);. In JavaScript, functions can be treated like variables. So, all we need to do is pass the function itself as a parameter.

This makes horace into a function, so that when you do horace(msg);, callbacker will be called with msg as a parameter.

Also, msg is never declared anywhere in your example and your horace(msg); will run before the AJAX call is done. You need use the AJAX call's callback here.

$(document).ready(function(){
    function freedome(horace){
        $.ajax({
            url: "RESPONDERdetails.php",
            type: "GET",           
            dataType: "json",
            data:{thing:31},
            success: function(msg){
                horace(msg);
            }
        });
    } 

    function callbacker(msg){
        alert("I am callback");
        name = msg["username"];
        alert(name);
    }

    freedome(callbacker);
});

answered Oct 21 '16 at 14:33

gen_Eric

223,194
41
299
337

Ok to clarify further...I think I have two confusions. The first is that when you pass a callback to a function, the callback should always be executed last. – John Oct 23 '16 at 03:27
Ok to clarify further...I think I have two confusions. The first is that when you pass a callback to a function, the callback should always be executed last. – John Oct 23 '16 at 03:28
Ok to clarify further...I think I have two confusions. (1) The first is that when you pass a callback to a function, the callback should always be executed last. However I note the comment above that in my original code, horace would be executed before the ajax call is finished. So it seems that in the ajax function callbacks dont automatically run last after the ajax is finished. (2) It seems that to get the return value of the ajax call you have to run either 'success' or the 'done' method - and only then will you get access to the result variable. – John Oct 23 '16 at 03:30
Also apologies for the double post above, kept pressing the return key. – John Oct 23 '16 at 03:31
@John: AJAX runs in the background. It downloads the data while the rest of your code runs. Once the download is done, then the `success` function runs with the downloaded data. The callback is an event that is triggered by the browser when its ready. – gen_Eric Oct 23 '16 at 18:10

Javascript callbacks - passing variables to them

1 Answers1