Two different jQuery UI dialogs based on the same <div>

Well, I have a form that pops up in a modal dialog when a user hits this or that element. Depending on what was hit, the dialog behavior should slightly change. For example, by default, the dialog should have both [OK] and [Cancel] buttons, and the [X] close button in the top right corner. But sometimes I want the [X] and [Cancel] button to be hidden and escape to be disabled. The form ID and the field set stays the same.

I've tried the following:

    var dlg1 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    var dlg2 = $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });

    $("#button1").click( function() {
        dlg1
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

Now, the issue is, if I hit button1 to show dlg1, and then close it, and then hit button2, the options don't change. Displayed dialog still has options from dlg1. Vice versa, if dlg2 has been shown first, button1 handler does not override dialog options. Where am I wrong? Thanks a lot in advance.

Since it's not allowed to answer own questions prior to 8 hours passed, I'm editing the question to provide an answer:

All right, I've figured it out. I ended up doing the following:

var dlg1 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
                return false;
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    })
    }

    var dlg2 = function() {
        return $('#dlgForm').dialog({
        autoOpen: false,
        modal: true,
        width: 607,
        resizable:false,
        dialogClass: 'noCloseButton',
        closeOnEscape: false,
        buttons: {
            Submit: function() {
                // some actions here
                $(this).dialog("close");
             开发者_JAVA百科   return false;
            }
        },
        close: function() {
            $('#dlgForm input[type="text"]').val(null);
        }
    });
    }

    $("#button1").click( function() {
        dlg1()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

    $("#button2").click( function() {
        dlg2()
        .dialog('option', 'title', 'New Title')
        .dialog('open');
    });

That's it! Thanks everyone for your help.

---

(From memory)

You are using the same object to call the dialog against. The first time you call dialog open it grabs the div, instantiates the dialog with the parameters and puts it at the bottom of document (just above body close tag).

The next time you call dialog open it know the div with that id was previously instantiated and simply sets the display to block...

or something like that. Simply put, once a div has been loaded as a dialog it is not reloaded with every dialog.open but just made visible.

---

When you are closing your dialogs try employing the destroy method.

http://jqueryui.com/demos/dialog/#method-destroy

---

try using the .dialog( "destroy" ) method before each call. This will give you a fresh start.

---

Most likely jQuery UI is lazy loading the initialization of the dialog on dialog('open'), which means the first one that is called is the one that gets set.

dialog('destroy') works, but I suggest cloning the node for the second dialog. See http://api.jquery.com/clone/.

---

I tried the suggested ideas, I needed to clear the dialog upon close as 2 different dialogs use the same div. Removing the whole div will ensure the 2nd dialog isn't actually the first just being shown again. The destroy method's weren't doing the trick in my case.

close: function(ev, ui) {
    $(this).remove();
}

I am adding a div to the body when initializing the dialog, this might not work without creating a div to populate the dialog with on the fly.

This worked for me. Now I can open different dialogs with different contents on the same page and the previous dialog won't have any effect on the new dialog.