I'm creating a div with jquery, loading content from webserver with load, and then dynamically creating a dialog using jquery-ui. This is working great, however, in the page that is loaded there is $(document).ready code that is supposed to fire when the page is loaded. Currently it fires instantly, even though the page isn't loaded. Currently the only way I can get the page to load properly is move the code in the document.ready to a setTimeout (this seems sketchy to me and is probably going to cause race conditions galore). The following is the code that creates the dialog (if my rambling description above wasn't too clear):
function AddWindow(url, windowName, windowTitle)
{
$('<div id="' + windowName + '"/>').load(url,function()
{
$(this).dialog({title: windowTitle, modal: true}).bind('dialogclose',
function () { $(this).remove(); });
});
}
Note: This code opens dozens of different pages, with different code that has to be run upon loading so I can't bind to 'dialogopen', it has to be javascript on the page that has loaded. And yes I have tried using body.onload on the page but it fails too.
EDIT: People have asked for the code that loads on the page, unfortunately there are dozens of examples of what loads, but for example, on one page we have to create tabs. However when this is called $('.tabs') returns []:
$(document).ready(function() {
$('.tabs').tabs("div.panes > div", {effect: 'ajax', api: true});
});
what I have been forced to do is add this to the page:
setTimeout(function() {
$('.tabs').tabs("div.panes > div", {effect: 'ajax', api: true});
开发者_StackOverflow社区 }, 50);
Can't you just simply listen to the dialogopen elements matching your content?
$('#windowName or .tabs.parent(), not the whole document').bind('dialogopen', function() {
$('.tabs').tabs("div.panes > div", {effect: 'ajax', api: true});
});
Or did you try using a custom event?
function AddWindow(url, windowName, windowTitle)
{
$('<div id="' + windowName + '"/>').load(url,function()
{
$(this).dialog({title: windowTitle, modal: true}).bind('dialogclose', function () { $(this).remove(); })
.trigger( "myDialogReady" );
});
}
and
$('#windowName').bind("myDialogReady",function(){
$('.tabs').tabs("div.panes > div", {effect: 'ajax', api: true});
});
document.ready fires when the DOM is ready for manipulation. If you want to know when your page was fully loaded, try using window.load instead :
$(window).load(function() {
alert("images are loaded!");
});
Why not just check if it exists, and if not, create it?
if ($("#" + windowName).length==0)
{
$(document.body).append("<div id='" + windowName + '" />");
}
// YOUR CODE...
精彩评论