Question

我创建了一个jQuery对话框。下面是我创建它的Ajax函数。

$.ajax({
    url: "/StaffManageCertifications/GetExamCodesAndCategory/",
    type: "Post",
    datatype: "html",
    success: function (data) {
        debugger;
        $('#divExamCodesCategory').html(data);
        $("#divExamCodesCategory").dialog({
            autoOpen: false,
            width: 700,
            height: 610,
            modal: true,
            resizable: false,
            draggable: true,
            title: 'Add Exam Code/Category'
        });
        $("#divExamCodesCategory").dialog("open");
        $('a.ui-dialog-titlebar-close').remove();
        $('#divProcessImage').css({
            "display": "none"
        });
    },
    error: function (req, status, error) {
        ErrorMessageStaff(req.responseText);
        $('#screen').css({
            "display": "block",
            "width": "",
            "height": ""
        });
        $('#divProcessImage').css({
            "display": "none"
        });
    }
});

现在，我在div = divExamCodesCategory上放了两个按钮（Ok和Cancel）。

并写下以下代码行，以便每次关闭时都会销毁此对话框。

$("#divExamCodesCategory").dialog("destroy");

现在，当我第二次打开时，在第一次单击时 - 它不显示对话框。在第二次点击时 - 它确实显示对话但没有数据。空对话。

此外，它不会出现在屏幕的中央。它下降到屏幕的底部。下面是此对话框的位置样式。

.ui-dialog {
    padding: 0em !important;
    position: fixed !important;
}

对此有任何帮助表示赞赏。

感谢。

Answer 1

如果您打算在每次关闭时销毁对话框，则需要在对话框的关闭处理程序中完成：

$(...).dialog({
    ...,
    close: function() {
        $(this).dialog('destroy');
    }
});

按照目前的情况，如果您（未示出）destroy调用紧跟在此AJAX调用之后，正如您所描述的那样，它实际上会立即发生，因为AJAX调用是异步并完成直接走了。

P.S。而不是使用$.css({'display': 'none'})，只需使用.hide()

Answer 2

我在下面找到了解决这个问题的方法：希望这有帮助的人......：）

管理解决问题，问题是每当调用$（“import_box_dialog”）。dialog（）时，程序就会反复创建不必要的div。并且由于$运算符返回u所有div匹配给定条件，即在这种情况下的ID，因此内容没有变得可见，我认为这让它感到困惑，有两种方法可以解决它：

通过调用

手动删除Div

$("import_box_dialog").remove()

然而，这将删除对话框div中的所有其他Div 使用变量来跟踪用于对话框的div，因为我使用的是jquery类，我将它用于静态变量。这样，它就跟踪对话框，并始终在同一个div上创建对话框。

我认为jquery应用了很多类样式，因为在选择正确的div时存在歧义，我想使用静态变量来解决它。

Answer 3

（创建一个对话框并重新使用它）是很好的方法，反之亦然。 //您每次都在创建新对话框，检查它是否已创建如果没有，则创建并打开其他打开以前创建的对话框

 if (!$("#divExamCodesCategory").hasClass('ui-dialog')) { //check if alredy created
// it is not initialized yet
        $("#divExamCodesCategory").dialog({ autoOpen: false,
                width: 700,
                height: 610,
                modal: true,
                resizable: false,
                draggable: true,
                title: 'Add Exam Code/Category'

            });
        //initialized
    }
//open dialog
    $("#divExamCodesCategory").dialog("open");// after creation

Answer 4

首先。你必须在ajax调用之外移动这段代码。

$("#divExamCodesCategory").dialog({ autoOpen: false,
    width: 700,
    height: 610,
    modal: true,
    resizable: false,
    draggable: true,
    title: 'Add Exam Code/Category'

});

把它放在这里。

$(document).ready(function() {
    $("#divExamCodesCategory").dialog({ autoOpen: false,
        width: 700,
        height: 610,
        modal: true,
        resizable: false,
        draggable: true,
        title: 'Add Exam Code/Category'
    });
});

将成功通话更改为：

success: function (data) {
    debugger;
    $('#divExamCodesCategory').html(data);
    $("#divExamCodesCategory").dialog("open");
    $('a.ui-dialog-titlebar-close').remove();
    $('#divProcessImage').css({ "display": "none" });
},

当你想要关闭时。不要破坏对象。关闭它

$("#divExamCodesCategory").dialog("close");

对于CSS。不要修复对话框的位置。默认情况下，它位于中央屏幕上。您可能需要调整高度和宽度，但保留位置。

jQuery：对话框没有正确打开第二次

4 个答案: