Question

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});
  }, 50);

Answer 1

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});
});