Question

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");
                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.

Answer 1

(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.