Jquery Dialog show: blind, hide: drop; only working once

I have 开发者_C百科the following code:

$("#dialog").dialog({
    height: 360,
    width: 630,
    modal: true,
    autoOpen: false,
    show: 'blind',
    hide: 'drop',
    resizable: false,
    dialogClass: 'noFloat'
});

$("#openDiag").click(function() {

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

    $.ajax({
        type: "POST",
        url: "setHsdSegment.jsp",
        dataType: "html",
        resizable: false,
        //data:"name="+name+"&age="+age,
        success: function(data) {
            $("#response").html(data);
        }
    });
});

The problem that I am facing is, the show and hide works only once. If I click on the button (#openDialog) again, only the translucent screen shows up and not the dialog box.

The funny thing is, this happens only when the hide is 'drop' and show is anything else except the 'drop'. But when the show is 'drop' and hide is anything else, then everything is fine.

Does the show have to be 'drop' when the hide is 'drop'?

EDIT: This is happening only in IE. ( as usual IE is causing problem. :D... why?)

It is a known bug in jQuery UI: http://bugs.jqueryui.com/ticket/5615

A quick fix is to destroy and recreate the dialog:

var $dlg = $("#dialog");
var dlgOptions = $dlg.dialog("option");
$dlg.dialog("destroy");
$dlg.dialog(dlgOptions);

It seams that the dialog goes out of the screen and forgets to come back the next time it's shown (unless "show" is set to "drop" which does the exact opposite).

It seems to be working fine in this demo: http://jsfiddle.net/william/mQkH7/

Perhaps try to upgrade/downgrade your jQuery UI.

I found a work around for it. Not sure if this is the best way, but it works. It is as follows:

 $("#openDiag").click(function(){
  $('#dialog').dialog('destroy');
   $("#dialog").dialog({
                    height: 360,
                    width: 630,
                    modal: true,
                    autoOpen: true,
                    show: 'slide',
                    hide: 'drop',
                    resizable: false,
                    dialogClass: 'noFloat',
                    buttons: { "Ok": function() { $(this).dialog("close"); 

                                                } }
                });

It seems like for IE, I need to destroy the dialog plugin before I create a new one. I kept the 'destroy' at the beginning because I wanted to maintain the closing effect. What I am missing here is to check if the plugin exists, before I destroy it. But it still works with no errors; that I don't know why.

But this still doesn't answer the question, why the problem existed in the first place, only for this particular combination and only in IE. Could someone tell me the reason?