2

我创建了一个 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 上放置了两个按钮（确定和取消）。

并写在下面的代码行中，每次关闭它时都会破坏这个对话框。

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

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

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

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

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

谢谢。

4

4 回答 4

5

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

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

就目前而言，如果您的（未显示的）destroy调用紧跟在此 AJAX 调用之后，正如您所描述的那样，它实际上会立即发生，因为 AJAX 调用是异步的并且立即完成。

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

于 2013-07-12T07:12:23.117 回答
2

我在下面找到了解决此问题的方法：希望这对某人有所帮助.. :)

设法解决了这个问题，问题是程序在每次调用 $("import_box_dialog").dialog() 时反复创建不必要的 div。并且由于 $ 运算符返回您所有匹配给定条件的 div，即在这种情况下为 ID，因此内容没有变得可见，我认为这使它感到困惑，有两种方法可以解决它：

通过调用手动删除 Div

$("import_box_dialog").remove()

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

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

于 2013-07-12T10:47:05.873 回答
0

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

 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
于 2013-07-12T07:05:06.397 回答
0

第一的。您必须将此代码移到 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。不要固定对话框的位置。默认情况下，它位于中央屏幕上。您可能想要调整高度和宽度，但要离开该位置。

于 2013-07-12T07:10:14.560 回答