Search code examples
javascriptjquerymodal-dialogjquery-ui-dialog

jQuery modal dialog does not stop for user input


I am new to jQuery but have already implemented successfully several modal dialogs using the jqueryUI dialog widget. In trying to implement another one, the modal dialog opens, but the code continues on to execute without stopping for user input. Using jQuery 1.7.1 and jquery-ui-1.8.16.

Here is the definition of a "prototype" of the dialog (it is a "prototype" because it doesn't take the actions on the "OK" selection that would be needed to meet requirements):

var $confirm = $('#confirm');
$confirm.dialog(
{
    autoOpen:false,
    width:440,
    modal:true,
    buttons:
    {
        OK: function()
        {
            $( this ).dialog( 'close' );
        },
        Cancel: function()
        {
            $( this ).dialog( 'close' );
        }
    }
});

Here is some test code that opens the dialog:

[ some javascript that does error checking]
alert('stop1');
$('#confirm').dialog('open');
alert('stop2');
[ more javascript including submitting the form]

What happens is the the first alert displays. Upon clicking on it the dialog opens along with the second alert, indicating that the dialog is not waiting for user input. The second alert is modal and prevents the dialog from being accessed. When it is clicked on, the form submits. This sequence shows that the dialog is not waiting for user input.

I have looked and looked at my other successfully implemented modal dialogs and do not see what might be causing this one to fail.


Solution

  • The dialog won't wait. Instead you'll want to use this as a point to decide what you want to happen. So instead of including additional code that you may or may not want to run after the dialog modal, let that be the last part of the function.

    Then, with your OK or Cancel functions, make the call there to continue on with the workflow if they chose ok, or just hide and do whatever cancel stuff needs to be done with the cancel.

    In short, the modal dialog will not pause execution of the javascript, it will just run the code to open the modal and keep on going.