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 pletely 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.
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 pletely 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.
script
at the end of page2
?
– Joseph Silber
Commented
Jan 9, 2012 at 18:53
script
, everything before that would have loaded.
– Joseph Silber
Commented
Jan 9, 2012 at 18:56
jQuery.fn.load
uses AJAX to load the HTML and then injects it into the node. As such, the script tag should execute asynchronously after the node insertion pletes.
– Brian Nickel
Commented
Jan 9, 2012 at 19:04
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.
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.
the callback function for load from the jQuery docs: http://api.jquery./load/
plete(responseText, textStatus, XMLHttpRequest)A callback function that is executed when the request pletes.
This function executes when the request pletes, 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.
please if you want something to load after plete 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.plete(function(res){
$('#myDialog').html(res);
});
//after plete loading and request end
req.always(function(res){
page2ReadyFunction
});
all that instead of
$('#myDialog').load('page2Link', { }, function () { });
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>
could you use something like this:
<body onload="function2kickOffP2()">
This would go on the body of page2.