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.