I have 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?)
I found a work around for it. Not sure if this is the best way, but it works.
It is as follows:
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?