Creating a dialog confirmation after a dialog 'save' button is pressed

Question

I have a jquery dialog window where the user can provision a new server with different requirements. Now, when the user clicks 'Save' we want a confirmation window to open up to confirm that the user wants to do this.

My main concern is that this is a dialog box within a dialog box.

Here is the code for the dialog box

$('#newenvironment').dialog({
    autoOpen: false,
    buttons: {
        'Save': function() {
            var url = "./environment/new/";

            // There is code here that processes the fields

            // code to send the data to the server

            // URL gets built
            c.post(url);

            $('#newenvironment').dialog('close');
        },
        'Cancel': function() {
            $('#newenvironment').dialog('close');
        }
    },
    modal: true,
    width: 640
});

Thanks :)

Answer 1

You could do something like along these lines:

HTML:

<div id="mainDialog">
    <div id="area">
       <h2>Server requirements </h2>
       Enter something: <input type="text" name="yada"/>
    <div>
</div>

<div id="confirmDialog">Are you sure?</div>

Javascript:

$("#confirmDialog").dialog({
    height: 250,
    modal: true,
    autoOpen: false,
    buttons: {
        "Yes": function() {
            $(this).dialog("close");

            // show some sort of busy indicator here

            var url = "./environment/new";
            // code to process inputs from main dialog
            //c.post(url);

            // clear busy indicator here
        },
        "No": function() {
            $(this).dialog("close");
            $("#mainDialog").dialog("open"); 
        }
    }
});

$("#mainDialog").dialog({
    height:350,
    modal: true,
    autoOPen: false,
    buttons: {
        "Save": function() {
            $(this).dialog("close");  
            $("#confirmDialog").dialog("open");
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});

This will close the main dialog while the confirmation dialog is being displayed, and reopen it if you don't confirm. Alternatively, you could leave the main dialog open while the confirmation dialog is open. In that case, the main dialog will be blocked until the user exits the confirmation dialog.