Can I get two successive dialogs in javascript?

Question

I have a need to check two unrelated conditions when the user clicks submit, and request user feedback for each.

I can get one jquery dialog up working great but I will sometimes need two in a row, and then have it complete the button event.

Here's the gist: I have button

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

and then some Jquery checking a certain condition that if true pops up a dialog. If the dialog opens I return false so the original click event doesn't occur but in most case I want to let it pass through:

 $("#<%=btnSubmit.ClientID %>").click(
        function() {
           if (Condition) {
                $('#Dialog').dialog('open');
                return false;
            }
            return true;
        }
        );

I'm not using the regular dialog buttons but have another asp:button that calls a different OnClick Event in the code-behind:

$("#Dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 90,
            width: 450,
            modal: true,
            close: function() {}
<div id="Dialog">
   <asp:Button  ID="Button1" runat="server" Text="OK" OnClick="btnDeleteSomethingThenSubmit_Click" />
    <input type="button" value="Cancel" id="btnCancelDialog" />  
</div>

Which is all great. Works anyway. But I also need another condition checked, with a different dialog but this time just a yes/no flag and I don't need to hit a server side event, so how can I get one to pop first, wait for response and set a value, pop the second, and then go to the OnClick event? Something like :

$("#<%=btnSubmit.ClientID %>").click(
        function() {
           if (OtherCondition) {
                $('#Dialog2').dialog('open');

            }
           if (Condition) {
                $('#Dialog').dialog('open');
                return false;
            }
            return true;
        }
        );

Which obviously doesn't work.

Answer 1

Couldn't you have something like:

$("#<%=btnSubmit.ClientID %>").click(
  function() {
    var success = true;
     if (OtherCondition) {
       $('#Dialog2').dialog('open');
       success = false;
     }
     if (Condition) {
       $('#Dialog').dialog('open');
       success false;
     }
     return success;
    }
  );

Basically, catch either dialog returning false in a variable, otherwise return true and allow the form to submit?

Answer 2

jQuery dialogs are non-blocking and don't behave like native JavaScript dialogs, which is why you cannot do

$("#<%=btnSubmit.ClientID %>").click(function() {
    if (OtherCondition) {
        $('#Dialog2').dialog('open');
    }
    if (Condition) {
        $('#Dialog').dialog('open');
        return false;
    }
    return true;
});

You need to use the close callback like this:

$("#<%=btnSubmit.ClientID %>").click(function() {
    if (OtherCondition) {
        $('#Dialog2').dialog('open', {
            close: function() {
                if (Condition) {
                    $('#Dialog').dialog('open', {
                        // Call some function here to report the status
                        close: function() {}
                    });
                } else {
                    // Call some function here to report a different status
                }
            }
        });
    }
});