jQuery dialog shrinks when i open second time

I have div (say div1) which contains t开发者_如何学运维wo dropdown box and a form which has one another div (say div2). i have defined this div1 as jquery dialog. On change of 1st drop down another dropdown will be populated and on change of 2nd dropdown, div2 will be loaded with html result of an ajax call.

Now i close the dialog using close button and then when i try to reopen the dialog (div1), the dialog height got shrinked below mentioned height. If i open dialog without changing 2nd dropdown, it is working fine. Only when onchange occurs in 2nd dropdown, the dialog box gets shrinked.

jQuery Dialog Open div1:

    $("#fileDoc").dialog({
    bgiframe: true,     
        autoOpen: false,
        height: 680,
        width: 800,
        modal: true,
        resizable: false
});

jQuery dialog close div1:

$('#fileDoc').dialog('close');

jQuery ajax call loads html in div2:

$("#doc").html(data);

i am using jQuery 1.4.4 and UI 1.8.2.

On close, make sure you are destroying the dialog .dialog( "destroy" ), otherwise dialog and it's content will remain hidden in DOM. This can create a problem since ID's are unique and you can only have one instance of the same #id open.

i have found the problem. div2 should be empty before closing the div1 dialog, otherwise that div2 height also taken and subtracted with dialog height and hence it reduces height in jQuery UI Dialog 1.8.2.

so, jQuery dialog close div1:

$("#div2").html(""); $("#fileDoc").dialog("close");