7
\$\begingroup\$

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.

\$\endgroup\$
6
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.