jQuery modal dialog does not stop for user input

Question

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.

This may answer it: http://stackoverflow.com/questions/6951999/how-to-synchronize-jquery-dialog-box-to-act-like-alert-of-javascript — Jere, Jan 14 '12 at 22:24

score 1 · Accepted Answer · answered Jan 14 '12 at 23:12

1

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.

answered Jan 14 '12 at 23:12

ryanmarc

1,670
1
10
9

1

I should add that my objective is simply to replace a javascript alert with a nice jQuery UI modal confirmation. Perhaps the problem is due to an attempt to mix previously implemented plain javascript with the jQuery modal dialog. I understand your point about putting the code inside the OK and Cancel functions. But it still seems odd to me that "modal" in this case is not modal with respect to all the javascript, but only to the jquery javascript, which it seems like being modal implies. – Jeffrey Simon Jan 15 '12 at 17:09
Another way of saying what I have above might be as a rule of thumb "do not mix onclick in the html with jQuery functions. Either do everything via the onclick, or everything via jQuery. Is this a valid observation? – Jeffrey Simon Jan 15 '12 at 17:23

Emjaycobs · Answer 2 · 2019-05-02T15:13:43.537

0

You should use a promise:

function deferredConfirm(message) {

$('<div></div>').html(message).dialog({
    dialogClass: 'confirmDialog',
    buttons:
    [{
        text: buttonText,
        click: function () {
            $(this).dialog("close");
            defer.resolve();
        }
    },
    {
        text: buttonText2,
        click: function () {
            $(this).dialog("close");
            defer.reject();
        }
    }],
    close: function () {
        $(this).remove();
    }
});

    return defer.promise();
}

And to call it:

            deferredConfirm("Oh No!").then(function() {
               //do something if dialog confirmed
            });

edited May 02 '19 at 15:13

answered May 02 '19 at 13:34

Emjaycobs

1
1

1

This looks like a very interesting approach. However, as one might guess, since the original question is now over 7 years old we have long developed our own methods to handle the requirement. The approach of this answer is probably simpler however, and could be revisited at the time of re-engineering. – Jeffrey Simon May 03 '19 at 15:01

jQuery modal dialog does not stop for user input

2 Answers2