$(document).ready equivalent in asynchronously loaded content
Question
I have a UI (let's call it page 1 ) which has a lot of HTML and JavaScript in it. When some of the elements on page 1 are clicked, a jQuery UI Dialog is opened and loaded with a partial page (let's call that page 2 ):
$("#myDialog").dialog({ modal: true /* Other options */ });
$('#myDialog').load('page2Link', { }, function () { });
$('#myDialog').dialog('open');
Page 2 then has a bunch of HTML and JavaScript as well. Simplified example:
<script src="Scripts/page2Stuff.js" type="text/javascript"></script>
<div id="page2Body">
<!-- More elements -->
</div>
I have JS inside page2Stuff.js that needs to wait until page 2 is completely rendered. Is there something I can use within this partial page to see if the new HTML has been added to the DOM? I have tried the following:
$('#myDialog').load('page2Link', { }, page2ReadyFunction);
This can't find page2ReadyFunction . I assume because .load runs the JavaScript in page2Stuff.js and then discards it or something?
The way I'm able to get it to work now it to use setTimeout and continually check to see if $('#page2Body') returns anything but this doesn't seem ideal.
6 answers
solution1
2 ACCPTED 2012-01-09 19:11:41
Instead of having your script tag at the beginning of your second page, put it at the end of it, after all the HTML, like this:
<div id="page2Body">
<!-- More elements -->
</div>
<script src="Scripts/page2Stuff.js" type="text/javascript"></script>
Since the code will be executed according to source order, you can rest assured that the HTML will be ready by the time your script runs.
solution2
1 2012-01-09 19:01:05
When you run the load function, it is expecting page2ReadyFunction to exist at that exact time. It does not because you haven't loaded the script. The following would get around that problem but also shouldn't work because the script will load asynchronously:
$('#myDialog').load('page2Link', { }, function() {page2ReadyFunction();});
To get around that problem, you could do something like this:
$('#myDialog').load('page2Link', { }, function() {
function tryPageLoad() {
if(page2ReadyFunction)
page2ReadyFunction();
else
setTimeout(tryPageLoad, 100);
}
tryPageLoad();
});
This function tries every 100ms to see if page2ReadyFunction exists and calls it when it does.
Of course, you shouldn't have to worry about any of this because the child script tag will load asynchronously and the rendering should happen before the JavaScript executes. You could verify this by using console.log to see what fires first, the JavaScript in the client script or the callback function.
solution3
1 2012-01-09 19:01:16
the callback function for load from the jQuery docs: http://api.jquery.com/load/
complete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request completes.
This function executes when the request completes, but you need to wait until page2 has been rendered.
A simple solution would be to put a $(document).ready() block into the javascript files that page2 pulls.
solution4
0 2012-01-09 19:02:13
please if you want something to load after complete ajax load
you gotta use the
full ajax function like that
var req= $.ajax({
url:'page2Link',
type:"post",
data:{ajax:1,field_id:field_ids,whatever:whatever}
});
//after loading
req.complete(function(res){
$('#myDialog').html(res);
});
//after complete loading and request end
req.always(function(res){
page2ReadyFunction
});
all that instead of
$('#myDialog').load('page2Link', { }, function () { });
solution5
0 2012-01-09 19:09:59
Serve out Page 2 like this:
<script src="Scripts/page2Stuff.js" type="text/javascript"></script>
<div id="page2Body">
<!-- More elements -->
</div>
<script>
$(function() {
// call your function from page2Stuff.js here
});
</script>
solution6
0 2012-01-09 19:12:35
could you use something like this:
<body onload="function2kickOffP2()">
This would go on the body of page2.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.