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
– MaxGeek, Commented Nov 16, 2010 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
– cambraca, Commented Nov 16, 2010 at 23:48
Do you tried to place alert("SelectOptions: " + selectOptions); inside of the function(data) {...}? — Oleg
– Oleg, Commented Nov 16, 2010 at 23:50
This question comes up at least once a day on SO... head => desk — Matt Ball
– Matt Ball, Commented Nov 16, 2010 at 23:50

casablanca · Accepted Answer · 2010-11-16 23:49:40Z

2

$.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.

answered Nov 16, 2010 at 23:49

casablanca

70.9k8 gold badges139 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mike · Accepted Answer · 2010-11-17 00:02:20Z

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, 2010 at 0:02

answered Nov 16, 2010 at 23:52

mike

4,4331 gold badge29 silver badges16 bronze badges

3 Comments

lonesomeday Over a year ago

-1 for recommending asynchronous requests. They are the quick way to fix this code, but are undoubtedly also the wrong way.

cambraca Over a year ago

@lonesomeday I wouldn't say undoubtedly, but in most cases you'd be right. Synchronous requests have their place in the world

mike Over a year ago

Fair enough. Added a disclaimer.

Community · Accepted Answer · 2017-05-23 12:19:05Z

1

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.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Nov 16, 2010 at 23:59

Oleg

222k36 gold badges414 silver badges826 bronze badges

Comments

wajiw · Accepted Answer · 2010-11-16 23:50:05Z

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, 2010 at 23:50

wajiw

12.3k17 gold badges56 silver badges73 bronze badges

Collectives™ on Stack Overflow

jquery function with variable problem

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related