How To Pre-Load Javascript/JQuery/HTML Dialog Boxes

Question

I have a lot of experience in Swing and WPF but not much in Javascript. I am learning as I go. The below is what I would like to do

• Have a single HTML Page for End User
• Preload Dialogs which will be displayed in response to user action

Currently I have all the divs for the dialog boxes load as part of the document and then in the document $(document).ready() function I call hide() .

I then open and close them. All this works currently. However I have the following problems:

• The divs sometimes momentarily appear on page load
• It annoys me that all these dialogs that are not part of the index page have to be loaded as part of the index page. (I am a little OCD with Code Organization).

Thanks-in-advance,

Guido

Answer 1

The jQueryUI Dialog will ease your display issues. I've found it to be more stable than anything I could write myself. You can, using AJAX, load content dynamically and put that markup into a single dialog DIV. It's as simple as knowing the DIV's ID, setting the html based on the AJAX response and then calling .dialog() on the popup.

Answer 2

You could start the dialog box divs off with a style attribute set to:

style="display:none;"

Which is what jQuery does when it calls .hide(), then you wont have to wait for jquery to be ready before the element is hidden, the CSS will automatically do it for you