jQuery: Passing variables to function upon successful $.get request

Question

Is it possible to pass predefined variables to functions called upon successful jQuery $.get request?

As in the example below the PHP script would return "bar":

var extra = "foo";
$.get(baar.php, function(data, extra){
    alert(extra + data);
});

Thus my goal being an alert box proclaiming "foobar" to the world.

Thanks.

JavaScript functions are closures. No need to do anything more than just reference the variable. — , May 07 '13 at 20:12
...that said, another option is to take the `jqxhr` object returned from `$.get()` and add properties to it. That object will be available as the 3rd argument to the callback, as well as the `this` value, allowing you to retrieve the property. This helps make your function reusable. — , May 07 '13 at 20:15

bfavaretto · Accepted Answer · 2013-05-07T21:44:05.850

4

You don't need to pass it, extra will be available inside the callback because of how JavaScript scoping works. So:

var extra = "foo";
$.get('baar.php', function(data){
    alert(extra + data);
});

edited May 07 '13 at 21:44

answered May 07 '13 at 20:11

bfavaretto

71,580
16
111
150

can I modify `extra` variable? will it survive after the call to `get`? – Throoze Aug 30 '13 at 10:03
@Throoze Yes, but keep in mind that the get call is asynchronous. The line right after `$.get` will run before the get request is completed, and if you check `extra` there it will still contain the unmodified value. – bfavaretto Aug 30 '13 at 14:03
@bfavaretto: Thanks! that was the problem with my code. The asynchronous call. I guess I'll have to put a `settimeout`, or trigger an event when the request is completed. – Throoze Sep 01 '13 at 23:27
@Throoze Don't use setTimeout. The function you're passing to $.get is called as soon as the data is available, so do whatever you need from there (e.g., call another function and pass the data ahead). – bfavaretto Sep 02 '13 at 02:13
@Throoze For a detailed explanation, see http://stackoverflow.com/a/14220323/825789. – bfavaretto Sep 02 '13 at 02:18
@bfavaretto: Thanks! I read it. It is a really complete explanation. Obrigado! – Throoze Sep 02 '13 at 03:16

score 1 · Answer 2 · answered May 07 '13 at 20:12

1

I don,t think it is possible. but you can use external variable inside function

var extra = "foo";
$.get(baar.php, function(data){
    alert(extra + data);
});

answered May 07 '13 at 20:12

Anoop

23,044
10
62
76

score 1 · Answer 3 · answered Mar 31 '15 at 19:27

I know this post is old(er), but I had this same problem and thought I'd post the solution for the next guy. Basically, like bfalvretto says above, jquery's .get() and .post() functions are async, so by the time it got the remote url, the variable's value was different.
My solution was to throw the .get() part of it into it's own separate function to limit the scope of the callback. This is what I came up with:

$("#SomethingClick").click(function(e) {
   e.preventDefault();

    $.post("..getURL", { id: 123 }, function(data) {
       for (i = 0; i < data.rows.length; i++) {
        ExternalFunction(data.rows[i].Value1, data.rows[i].Value2);
    }
    });
});
...
function ExternalFunction(value1, value2) {
    $.get("/Core/ContactViewer/" + contactID, function (data2) {
        $("someoutputdiv").html("<div>" + value1 + ": " + value2 + "</div>");
    });
}

Hope this helps.

I have no idea why this works in my case but it does, so thanks! I had a `for` loop with a value being declared on each iteration but it was still using the final value for all of the `.get` callbacks. — Jimbali, May 28 '15 at 02:12

jQuery: Passing variables to function upon successful $.get request

3 Answers3