Jquery callbacks with several ajax calls
I have several functions where I'm filling a dropdown based on a list from an ajax call :
function getMissions(defaultId) {
$.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
$.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
Now, after dropdown have been filled, I want to select a specific item, but to get this item, I need an other ajax like :
function getDefaultDetails(defaultId) {
$.ajax({
type: "GET",
url: "/Defaults/GetDefault",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { defaultId: defaultId },
success: function (response) {
//code here to select the items from the response
},
});
}
and the main function would basically be :
function main(defaultId){
getMissions(defaultId);
getSectors(defaultId);
getDefaultDetails(defaultId);
}
The trouble is that the success callback of getDefaultDetails is reached before fillUpdateDropDown has been finished (dropdowns could have a lot of items).
I'm trying to understand the callbacks but in my case i cannot achieve my problem. I have tried something like :
$.when(getMissions(defaultId), getSectors(defaultId)).done(getDefaultDetails(defaultId));
but without success.
How to perform that?
Thanks.
jquery ajax callback
asked Nov 22 at 18:21
Manta
18410
add a comment |
I have several functions where I'm filling a dropdown based on a list from an ajax call :
function getMissions(defaultId) {
$.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
$.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
Now, after dropdown have been filled, I want to select a specific item, but to get this item, I need an other ajax like :
function getDefaultDetails(defaultId) {
$.ajax({
type: "GET",
url: "/Defaults/GetDefault",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { defaultId: defaultId },
success: function (response) {
//code here to select the items from the response
},
});
}
and the main function would basically be :
function main(defaultId){
getMissions(defaultId);
getSectors(defaultId);
getDefaultDetails(defaultId);
}
The trouble is that the success callback of getDefaultDetails is reached before fillUpdateDropDown has been finished (dropdowns could have a lot of items).
I'm trying to understand the callbacks but in my case i cannot achieve my problem. I have tried something like :
$.when(getMissions(defaultId), getSectors(defaultId)).done(getDefaultDetails(defaultId));
but without success.
How to perform that?
Thanks.
jquery ajax callback
asked Nov 22 at 18:21
Manta
18410
add a comment |
I have several functions where I'm filling a dropdown based on a list from an ajax call :
function getMissions(defaultId) {
$.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
$.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
Now, after dropdown have been filled, I want to select a specific item, but to get this item, I need an other ajax like :
function getDefaultDetails(defaultId) {
$.ajax({
type: "GET",
url: "/Defaults/GetDefault",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { defaultId: defaultId },
success: function (response) {
//code here to select the items from the response
},
});
}
and the main function would basically be :
function main(defaultId){
getMissions(defaultId);
getSectors(defaultId);
getDefaultDetails(defaultId);
}
The trouble is that the success callback of getDefaultDetails is reached before fillUpdateDropDown has been finished (dropdowns could have a lot of items).
I'm trying to understand the callbacks but in my case i cannot achieve my problem. I have tried something like :
$.when(getMissions(defaultId), getSectors(defaultId)).done(getDefaultDetails(defaultId));
but without success.
How to perform that?
Thanks.
jquery ajax callback
asked Nov 22 at 18:21
Manta
18410
I have several functions where I'm filling a dropdown based on a list from an ajax call :
function getMissions(defaultId) {
$.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
$.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
Now, after dropdown have been filled, I want to select a specific item, but to get this item, I need an other ajax like :
function getDefaultDetails(defaultId) {
$.ajax({
type: "GET",
url: "/Defaults/GetDefault",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { defaultId: defaultId },
success: function (response) {
//code here to select the items from the response
},
});
}
and the main function would basically be :
function main(defaultId){
getMissions(defaultId);
getSectors(defaultId);
getDefaultDetails(defaultId);
}
The trouble is that the success callback of getDefaultDetails is reached before fillUpdateDropDown has been finished (dropdowns could have a lot of items).
I'm trying to understand the callbacks but in my case i cannot achieve my problem. I have tried something like :
$.when(getMissions(defaultId), getSectors(defaultId)).done(getDefaultDetails(defaultId));
but without success.
How to perform that?
Thanks.
jquery ajax callback
jquery ajax callback
asked Nov 22 at 18:21
Manta
18410
asked Nov 22 at 18:21
Manta
18410
asked Nov 22 at 18:21
Manta
18410
asked Nov 22 at 18:21
Manta
18410
asked Nov 22 at 18:21
Manta
18410
18410
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
$.when() expects thenable objects (Promise, Deferred, Thenable) like the return value of $.getJSON().
You also have to wrap the call for getDefaultDetails() in .done() in an anonymous function, otherwise you're executing the function and only use its return value (undefined) for .done()
function getMissions(defaultId) {
return $.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
return $.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getDefaultDetails() { /* ... */ }
$.when(getMissions(defaultId), getSectors(defaultId))
.done(function() { getDefaultDetails(defaultId) });
answered Nov 22 at 18:31
Andreas
16.2k32741
Thank you so much.returnand the wraping did the trick.
– Manta
Nov 22 at 18:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436414%2fjquery-callbacks-with-several-ajax-calls%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
$.when() expects thenable objects (Promise, Deferred, Thenable) like the return value of $.getJSON().
You also have to wrap the call for getDefaultDetails() in .done() in an anonymous function, otherwise you're executing the function and only use its return value (undefined) for .done()
function getMissions(defaultId) {
return $.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
return $.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getDefaultDetails() { /* ... */ }
$.when(getMissions(defaultId), getSectors(defaultId))
.done(function() { getDefaultDetails(defaultId) });
answered Nov 22 at 18:31
Andreas
16.2k32741
Thank you so much.returnand the wraping did the trick.
– Manta
Nov 22 at 18:39
add a comment |
$.when() expects thenable objects (Promise, Deferred, Thenable) like the return value of $.getJSON().
You also have to wrap the call for getDefaultDetails() in .done() in an anonymous function, otherwise you're executing the function and only use its return value (undefined) for .done()
function getMissions(defaultId) {
return $.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
return $.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getDefaultDetails() { /* ... */ }
$.when(getMissions(defaultId), getSectors(defaultId))
.done(function() { getDefaultDetails(defaultId) });
answered Nov 22 at 18:31
Andreas
16.2k32741
Thank you so much.returnand the wraping did the trick.
– Manta
Nov 22 at 18:39
add a comment |
$.when() expects thenable objects (Promise, Deferred, Thenable) like the return value of $.getJSON().
You also have to wrap the call for getDefaultDetails() in .done() in an anonymous function, otherwise you're executing the function and only use its return value (undefined) for .done()
function getMissions(defaultId) {
return $.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
return $.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getDefaultDetails() { /* ... */ }
$.when(getMissions(defaultId), getSectors(defaultId))
.done(function() { getDefaultDetails(defaultId) });
answered Nov 22 at 18:31
Andreas
16.2k32741
$.when() expects thenable objects (Promise, Deferred, Thenable) like the return value of $.getJSON().
You also have to wrap the call for getDefaultDetails() in .done() in an anonymous function, otherwise you're executing the function and only use its return value (undefined) for .done()
function getMissions(defaultId) {
return $.getJSON("Defaults/GetMissions", function (result) {
var dropDownToFill = $('#change-mission');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getSectors(defaultId) {
return $.getJSON("Defaults/GetSectors", function (result) {
var dropDownToFill = $('#change-sector');
fillUpdateDropDown(dropDownToFill, result);
});
}
function getDefaultDetails() { /* ... */ }
$.when(getMissions(defaultId), getSectors(defaultId))
.done(function() { getDefaultDetails(defaultId) });
answered Nov 22 at 18:31
Andreas
16.2k32741
answered Nov 22 at 18:31
Andreas
16.2k32741
answered Nov 22 at 18:31
Andreas
16.2k32741
answered Nov 22 at 18:31
Andreas
16.2k32741
16.2k32741
Thank you so much.returnand the wraping did the trick.
– Manta
Nov 22 at 18:39
add a comment |
Thank you so much.returnand the wraping did the trick.
– Manta
Nov 22 at 18:39
Thank you so much.
return and the wraping did the trick.– Manta
Nov 22 at 18:39
Thank you so much.
return and the wraping did the trick.– Manta
Nov 22 at 18:39
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436414%2fjquery-callbacks-with-several-ajax-calls%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
