How to wait for all jquery loads to finish
Using Jquery I'm replacing divs that have id's that start with 'lib_' with html from another file. It all works well, but I need to wait until they are all done before moving on in the code. The number of divs with 'lib_' could be none, or many. What I have here isn't waiting, it launches LoadStepPart5 before the .load is finished.
let deferreds = ;
$('[id^="lib_"]').each(function(){
let divID = $(this).attr('id');
let libID = divID.replace('lib_','');
deferreds.push( $( '#' + divID ).load( "lib/library.html #" + libID, function(){
console.log("this appears later, code didn't wait");
}));
});
$.when.apply(null, deferreds).done(function() {
console.log("immediately displayed");
LoadStepPart5(n,xml);
});
jquery load jquery-deferred
asked Nov 23 '18 at 7:20
MarkMark
164112
add a comment |
Using Jquery I'm replacing divs that have id's that start with 'lib_' with html from another file. It all works well, but I need to wait until they are all done before moving on in the code. The number of divs with 'lib_' could be none, or many. What I have here isn't waiting, it launches LoadStepPart5 before the .load is finished.
let deferreds = ;
$('[id^="lib_"]').each(function(){
let divID = $(this).attr('id');
let libID = divID.replace('lib_','');
deferreds.push( $( '#' + divID ).load( "lib/library.html #" + libID, function(){
console.log("this appears later, code didn't wait");
}));
});
$.when.apply(null, deferreds).done(function() {
console.log("immediately displayed");
LoadStepPart5(n,xml);
});
jquery load jquery-deferred
asked Nov 23 '18 at 7:20
MarkMark
164112
add a comment |
Using Jquery I'm replacing divs that have id's that start with 'lib_' with html from another file. It all works well, but I need to wait until they are all done before moving on in the code. The number of divs with 'lib_' could be none, or many. What I have here isn't waiting, it launches LoadStepPart5 before the .load is finished.
let deferreds = ;
$('[id^="lib_"]').each(function(){
let divID = $(this).attr('id');
let libID = divID.replace('lib_','');
deferreds.push( $( '#' + divID ).load( "lib/library.html #" + libID, function(){
console.log("this appears later, code didn't wait");
}));
});
$.when.apply(null, deferreds).done(function() {
console.log("immediately displayed");
LoadStepPart5(n,xml);
});
jquery load jquery-deferred
asked Nov 23 '18 at 7:20
MarkMark
164112
Using Jquery I'm replacing divs that have id's that start with 'lib_' with html from another file. It all works well, but I need to wait until they are all done before moving on in the code. The number of divs with 'lib_' could be none, or many. What I have here isn't waiting, it launches LoadStepPart5 before the .load is finished.
let deferreds = ;
$('[id^="lib_"]').each(function(){
let divID = $(this).attr('id');
let libID = divID.replace('lib_','');
deferreds.push( $( '#' + divID ).load( "lib/library.html #" + libID, function(){
console.log("this appears later, code didn't wait");
}));
});
$.when.apply(null, deferreds).done(function() {
console.log("immediately displayed");
LoadStepPart5(n,xml);
});
jquery load jquery-deferred
jquery load jquery-deferred
asked Nov 23 '18 at 7:20
MarkMark
164112
asked Nov 23 '18 at 7:20
MarkMark
164112
asked Nov 23 '18 at 7:20
MarkMark
164112
asked Nov 23 '18 at 7:20
MarkMark
164112
asked Nov 23 '18 at 7:20
MarkMark
164112
164112
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
$.load follows standard jquery chaining, in that it returns the calling selector's jquery object. eg $("#id").load("url", callback).show(); will immediately show #id.
You are expecting a method that returns a promise: $.ajax
You can confirm this quickly in the browser console:
$("#a").load("url")
n.fn.init {context: document, selector: "#a"}
$.ajax({ url: "url" })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
Update your code to:
deferreds.push(
$.ajax(
{
url: "lib/library.html"
})
.done(function(html) {
$("#"+divID).html($("<div>").html(html).find("#"+libID).html());
console.log("this as html is loaded");
})
);
edited Nov 23 '18 at 16:01
Mark
164112
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
1
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
add a comment |
$(window).on('load', function()
{
// code here
});
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
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%2f53442212%2fhow-to-wait-for-all-jquery-loads-to-finish%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
$.load follows standard jquery chaining, in that it returns the calling selector's jquery object. eg $("#id").load("url", callback).show(); will immediately show #id.
You are expecting a method that returns a promise: $.ajax
You can confirm this quickly in the browser console:
$("#a").load("url")
n.fn.init {context: document, selector: "#a"}
$.ajax({ url: "url" })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
Update your code to:
deferreds.push(
$.ajax(
{
url: "lib/library.html"
})
.done(function(html) {
$("#"+divID).html($("<div>").html(html).find("#"+libID).html());
console.log("this as html is loaded");
})
);
edited Nov 23 '18 at 16:01
Mark
164112
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
1
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
add a comment |
$.load follows standard jquery chaining, in that it returns the calling selector's jquery object. eg $("#id").load("url", callback).show(); will immediately show #id.
You are expecting a method that returns a promise: $.ajax
You can confirm this quickly in the browser console:
$("#a").load("url")
n.fn.init {context: document, selector: "#a"}
$.ajax({ url: "url" })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
Update your code to:
deferreds.push(
$.ajax(
{
url: "lib/library.html"
})
.done(function(html) {
$("#"+divID).html($("<div>").html(html).find("#"+libID).html());
console.log("this as html is loaded");
})
);
edited Nov 23 '18 at 16:01
Mark
164112
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
1
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
add a comment |
$.load follows standard jquery chaining, in that it returns the calling selector's jquery object. eg $("#id").load("url", callback).show(); will immediately show #id.
You are expecting a method that returns a promise: $.ajax
You can confirm this quickly in the browser console:
$("#a").load("url")
n.fn.init {context: document, selector: "#a"}
$.ajax({ url: "url" })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
Update your code to:
deferreds.push(
$.ajax(
{
url: "lib/library.html"
})
.done(function(html) {
$("#"+divID).html($("<div>").html(html).find("#"+libID).html());
console.log("this as html is loaded");
})
);
edited Nov 23 '18 at 16:01
Mark
164112
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
$.load follows standard jquery chaining, in that it returns the calling selector's jquery object. eg $("#id").load("url", callback).show(); will immediately show #id.
You are expecting a method that returns a promise: $.ajax
You can confirm this quickly in the browser console:
$("#a").load("url")
n.fn.init {context: document, selector: "#a"}
$.ajax({ url: "url" })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
Update your code to:
deferreds.push(
$.ajax(
{
url: "lib/library.html"
})
.done(function(html) {
$("#"+divID).html($("<div>").html(html).find("#"+libID).html());
console.log("this as html is loaded");
})
);
edited Nov 23 '18 at 16:01
Mark
164112
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
edited Nov 23 '18 at 16:01
Mark
164112
edited Nov 23 '18 at 16:01
Mark
164112
edited Nov 23 '18 at 16:01
Mark
164112
164112
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
answered Nov 23 '18 at 9:23
freedomn-mfreedomn-m
12.2k31943
12.2k31943
1
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
add a comment |
1
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
1
1
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
This answer solved my problem and taught me a couple things. Thank you!
– Mark
Nov 23 '18 at 15:16
add a comment |
$(window).on('load', function()
{
// code here
});
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
add a comment |
$(window).on('load', function()
{
// code here
});
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
add a comment |
$(window).on('load', function()
{
// code here
});
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
$(window).on('load', function()
{
// code here
});
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
answered Nov 23 '18 at 7:56
Happy CoderHappy Coder
242
242
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
add a comment |
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
If you are using jquery version 1.7 or below you may be like $(document).load(function() { // code here });
– Happy Coder
Nov 23 '18 at 7:57
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.
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%2f53442212%2fhow-to-wait-for-all-jquery-loads-to-finish%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
