jquery function with variable problem

Question

I'm trying to return a list of select options to a JqGrid Add feature. I have a javascript/jquery function that does a GET to get a string preformatted to work with JqGrid. I'm having trouble returning the results to the JqGrid though. How do I return the data from the jQuery Get function?

function getDealerPoolSelectOptions() {
var selectOptions = "1:A;";
$.get("DealerManagement/GetAllDealerPoolCodes", function(data) {
    alert("Data: " + data.toString()); //Displays all the data I'm looking for
    selectOptions = data;
});
alert("SelectOptions: " + selectOptions); //Just Displays the 1:A
return selectOptions;
}

yes I tried adding toString just about everywhere, but it doesn't seem to make a difference. Its actually already a string. — MaxGeek, Nov 16 '10 at 23:47
Oh I see your problem, `$.get` is asynchronous, so selectOptions is getting set after the return of the function (the code inside runs after the request returns from the server) — cambraca, Nov 16 '10 at 23:48
Do you tried to place `alert("SelectOptions: " + selectOptions);` **inside of** the `function(data) {...}`? — Oleg, Nov 16 '10 at 23:50
This question comes up at least once a day on SO... head `=>` desk — Matt Ball, Nov 16 '10 at 23:50

score 2 · Accepted Answer · answered Nov 16 '10 at 23:49

$.get begins an asynchronous AJAX request and calls your callback function(data) ... once it is done. $.get itself returns before the request is complete. The alert("SelectOptions ...") part runs immediately (before the data is retrieved) so selectOptions isn't set yet.

mike · Answer 2 · 2010-11-17T00:02:20.217

2

jQuery ajax, by default, makes an asynchronous request (meaning it will make the request in the background, without blocking execution in the rest of the function).

EDIT: While you can make synchronous requests, I should note that this is very discouraged. Instead, you should design your code in a way that takes advantage of event driven programming.

You can make a synchronous request like this:

function getDealerPoolSelectOptions() {
    var selectOptions = "1:A;";
    $.ajax({
        async: false,
        url: "DealerManagement/GetAllDealerPoolCodes",
        success: function(data) {
            alert("Data: " + data.toString()); //Displays all the data I'm looking for
            selectOptions = data;
        }
    });
    alert("SelectOptions: " + selectOptions); 
    return selectOptions;
}

edited Nov 17 '10 at 00:02

answered Nov 16 '10 at 23:52

mike

4,393
1
27
16

-1 for recommending asynchronous requests. They are the quick way to fix this code, but are undoubtedly also the wrong way. – lonesomeday Nov 16 '10 at 23:59
@lonesomeday I wouldn't say _undoubtedly_, but in most cases you'd be right. Synchronous requests have their place in the world – cambraca Nov 17 '10 at 00:01
Fair enough. Added a disclaimer. – mike Nov 17 '10 at 00:04

score 1 · Answer 3 · edited May 23 '17 at 12:19

Probably you should describe your original problem. What you want to do with jqGrid?

Do you want to fill select of edit or search field with the data from the server? You should use dataUrl of the editoptions or the searchoptions. The feature (dataUrl) are introduced exactly for loading the data per ajax.

If the data which you can provide from the server can be only JSON and not in the format which are waiting by jqGrid you can use buildSelect additionally to reformat the data returned from the server. For more information see my old answer.

score 0 · Answer 4 · answered Nov 16 '10 at 23:50

0

The alert gets called before the selectOptions = data; because ajax functions are called asynchronously. If you want something to happen, like adding the data to a grid, call it in the get callback after you set the selectOptions data.

answered Nov 16 '10 at 23:50

wajiw

12,239
17
54
73

jquery function with variable problem

4 Answers4