jQuery UI Dialog opens only once

Question

I found answer to this questions on SO but it seems that the problem is different here. I cannot open it again after it has been closed.

EDIT: Ok, seems that there are errors in my Jquery code elsewhere.

 $(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });
  $('#opener').click(openDialog);

})

var openDialog = function(){


   $('#dialog').dialog('option', 'buttons',{
      "Cancel":function(){
         $('#dialog').dialog('close');
      }
  });


 $('#dialog').dialog('open');

};

And HTML:

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The     dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>

Answer 1

It seems to work for me: http://jsfiddle.net/DSNt5/1/

Answer 2

Try to add destroy method call on dialog close:

var openDialog = function(){
   $('#dialog').dialog('option',
    close: function () { $(this).dialog("destroy"); },
    'buttons',{
      "Cancel":function(){
         $('#dialog').dialog('close');
      }
  });

Answer 3

Have a look at this jsFiddle as it works

edits: updated link as it wasn't the one

Answer 4

I think you should use hide instead of close in

$('#dialog').dialog('option', 'buttons',{
  "Cancel":function(){
     // notice the hide here
     $('#dialog').dialog('hide');
  }
});

i haven't tested it but, as far as i can remember it. hope this helps