javascript - jquery ui dialog opens only once

Question

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden

After I close the dialog by clicking the X icon, the dialog can't be opened again.

Answer 1

Scott Gonzalez (of the jQuery UI Team) talks about the reason alot of people have this problem when getting started with jQuery UI in a recent blog post: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

An excerpt:

The problem that users often encounter with dialogs is that they try to instantiate a new dialog every time the user performs some action (generally clicking a link or a button). This is an understandable mistake because at first glance it seems like calling .dialog() on an element is what causes the dialog to open. In reality what is happening is that a new dialog instance is being created and then that instance is being opened immediately after instantiation. The reason that the dialog opens is because dialogs have an autoOpen option, which defaults to true. So when a user calls .dialog() on an element twice, the second call is ignored because the dialog has already been instantiated on that element.

Solution:

The simple solution to this problem is to instantiate the dialog with autoOpen set to false and then call .dialog('open') in the event handler.

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#opener').click(function() {
        $dialog.dialog('open');
    });
});