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');
    });
});

Answer 2

Are you using the ui dialog? You should post some code so we can see what is causing your problem. But here iss a guess (because I made this same mistake recently). When using ui dialog you have to initialize the dialog only once.

 $(document).ready(function() {
   $('#dialog').dialog({
     autoOpen:false,
     modal:'true',
     width:450,
     height:550
  });
 $('#MyButton').click(openDialog);    

});

This code, initializes the dialog but does not show it. The openDialog function will then open the dialog box when MyButton is clicked.

   var openDialog = function(){

       $('#dialog').load('loadurl.php');//load with AJAX

      //optionally change options each time it is clicked
       $('#dialog').dialog('option', 'buttons',{
          "Cancel":function(){
             $('#dialog').dialog('close');
          }
      });

     //actually open the dialog
     $('#dialog').dialog('open');

};

Answer 3

As an addition to the accepted answer i would like to add that you need to pay attention when using this in an asp.net updatepanel. If you click the button then a postback will happen, the popup will open but won't open a second time because of the postback that happened. So you should make sure that the button you use to open the popup does not postback. ie:

<asp:LinkButton ID="btn1" runat="server" OnClientClick="return false;">Click me</asp:LinkButton>