jQuery对话框在第二次打开时缩小

Question

我有一个div（称为div1），其中包含两个下拉框和一个表单，该表单又包含另一个div（称为div2）。我将这个div1定义为jquery对话框。在第一个下拉框的更改时，将填充另一个下拉框，并且在第二个下拉框的更改时，div2将加载ajax调用的html结果。

现在，我使用关闭按钮关闭对话框，然后当我尝试重新打开对话框（div1）时，对话框的高度会缩小到下面所述的高度。如果我在不更改第二个下拉框的情况下打开对话框，则正常工作。只有当第二个下拉框发生更改时，对话框框才会缩小。

jQuery对话框打开div1：

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

关闭 jQuery 对话框 div1：

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

使用jQuery ajax调用将html加载到div2中：

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

我正在使用jQuery 1.4.4和UI 1.8.2。

- Karthik

Answer 1

我已经找到了问题所在。在关闭 div1 对话框之前，div2 应该是空的，否则 div2 的高度也会被算入并且减去对话框的高度，因此会减少 jQuery UI Dialog 1.8.2 中的高度。

因此，jQuery 对话框关闭 div1：

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

- Karthik

---

我的英雄 ;). 我为此浪费了几个小时。我不得不隐藏和显示jqgrid来解决我的问题，但是这个答案让我走上了正确的轨道。 - elrado

Answer 2

关闭对话框时，请确保销毁对话框.dialog( "destroy" )，否则对话框及其内容将保留在DOM中而隐藏。这可能会创建问题，因为ID是唯一的，您只能打开同一#id的一个实例。

- Hussein