jQuery .dialog on load()

Question

I want do wrap error messages that appears (in #error div) and disappears from page to page in a jQuery UI dialog. Some of error messages are added dynamically by jQuery $('body').append('blablabla') or another insertion method. So this construction:

$('#error').load(function() {
   $('#error').dialog({
       draggable: false,
       modal: true
   });
});

is not work. This:

$('#error').live('load', function() {
   $('#error').dialog({
       draggable: false,
       modal: true
   });
});

is not work either. Can anybody tell me what should I do?

Answer 1

Are you trying to show the dialogs when the page is loaded? If so, you're looking for $(document).ready(). Note that this will actually trigger the inside function when the DOM is ready to be traversed; this is usually what you want because you don't want to wait for the browser to completely load the page before executing your code.

If you actually do want to wait until the page is loaded, use $(window).load().

The load event can only be tied to content that is actually loaded by the browser, e.g. frames, scripts, images, etc:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

So, a <div> cannot be bound to a load event.