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

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.

Vinnyq12 · Accepted Answer · 2011-05-13 19:14:47Z

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.

answered May 13, 2011 at 19:14

Vinnyq12

1,5599 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Hulak Over a year ago

That's pointed me to the right direction, thanks. The question was - "where am I wrong?", so that's an answer.

HurnsMobile · Accepted Answer · 2011-05-13 19:13:17Z

0

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

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

answered May 13, 2011 at 19:13

HurnsMobile

4,3913 gold badges29 silver badges39 bronze badges

1 Comment

Oleg Hulak Over a year ago

Yeah, I've tried that before and the dialog simply doesn't show up nowhere after it was destroyed.

AlbertVo · Accepted Answer · 2011-05-13 19:13:34Z

0

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

answered May 13, 2011 at 19:13

AlbertVo

7724 silver badges9 bronze badges

Comments

Matthew Ratzloff · Accepted Answer · 2011-05-13 19:16:04Z

0

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

answered May 13, 2011 at 19:16

Matthew Ratzloff

4,6631 gold badge34 silver badges37 bronze badges

Comments

lko · Accepted Answer · 2011-11-01 08:31:57Z

0

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.

answered Nov 1, 2011 at 8:31

lko

8,30910 gold badges47 silver badges62 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related