jQuery dialog for help popup

Question

I used jQuery-UI and jQuery to create a dialog popup for help snippets on search form inputs.

HTML (Calling Page)

<a id="Help" href="#">
 <img alt="help Symbol" src="Icons/helps.gif" style="border-style:none;"/>
 <span>Name Search</span>
</a>
<div id="dialog-confirm" title="Name Search Help" style="display: none;">
</div>

Script to call dialog

 $("#Help").click(function () {
 $("#dialog-confirm").load("/help/nameSearch.htm").dialog({
 resizable: false,
 height: screen.height - 300,
 position: {
 my: "left top",
 at: "left top",
 of: "#Table1"
 },
 width: '790px',
 height: 'auto',
 modal: true,
 buttons: {
 "Okay": function () {
 $(this).dialog("close");
 }
 },
 hide: { effect: "drop", direction: "up" },
 show: { effect: "drop", direction: "down" }
 });
 })
 $("#dialog-confirm").keypress(function (e) {
 if (e.keycode == $.ui.keyCode.ENTER) {
 $(this).dialog("close");
 }
 })

This works nicely to load the page from another folder in my site, but I get this weird glitchy feeling on the first time, which is going to probably be the most anyone will use these really awesome popup dialogues. I want them even better.

Is there any way to make it load more smoothly?

I am not opposed to using AJAX.

Answer 1

I would suggest loading the external file and initializing the dialog prior to the event...kind of like:

$(document).ready(function(){
 // make the dialog
 $("#dialog-confirm").load("/help/nameSearch.htm").dialog({
 autoOpen: false,
 resizable: false,
 height: screen.height - 300,
 position: {
 my: "left top",
 at: "left top",
 of: "#Table1"
 },
 width: '790px',
 height: 'auto',
 modal: true,
 buttons: {
 "Okay": function () {
 $(this).dialog("close");
 }
 },
 hide: { effect: "drop", direction: "up" },
 show: { effect: "drop", direction: "down" }
 });
 }).keypress(function (e) {
 if (e.keycode == $.ui.keyCode.ENTER) {
 $(this).dialog("close");
 }
 });
 $("#Help").click(function () {
 $("#dialog-confirm").dialog( "open" );
 });
});

That way, any delay caused by the loading of the file/creation of the dialog is handled on page load instead of on button click.

Note the addition of the autoOpen:false option. That keeps it from opening on init.