具有旧值的Jquery模态对话框

时间:2014-04-08 17:48:33

标签: jquery jquery-dialog

下面是我简单的Jquery对话框。我在页面中有5次相同的课程。我正在使用Iframe在Dialog中加载另一个页面。

这是第一次,所有字段都是空的。一旦我选择了值并打开另一个对话框,它就会显示旧值。如何加载空值的页面。

   $(document).ready(function () {
        $(".imgSearch").click(function (e) {
            $("#divSearch").dialog({
                open: function () {
                    $(this).closest(".ui-dialog")
                    .find(".ui-dialog-titlebar-close")
                    .removeClass("ui-dialog-titlebar-close");
                },
                title: "Search Employee",
                show: "scale",
                modal: true,
                width: '55%',
                height: 500
            });
        });
    });

2 个答案:

答案 0 :(得分:1)

对话框将包含与之前内容相同的内容。您将需要编码以清除任何元素。我还会添加一个close事件处理程序和 destroy 最后一个实例,例如:

$(document).ready(function () {
    $(".imgSearch").click(function (e) {

        //Clear elements here.....

        $("#divSearch").dialog({
            close: function() { $(this).dialog('destroy'); },
            open: function () {
                $(this).closest(".ui-dialog")
                .find(".ui-dialog-titlebar-close")
                .removeClass("ui-dialog-titlebar-close");
            },
            title: "Search Employee",
            show: "scale",
            modal: true,
            width: '55%',
            height: 500
        });
    });
});

当你不破坏时,你会反复得到同样的对话以及对对象的任何封闭引用。这将导致奇怪的行为。

要清除div中的所有元素,您应该在打开对话框之前执行以下操作:

$('#divName input').val('');

要从IFrame加载,请尝试以下操作:

var _dlg = null;   // <- declare this before the $(document).ready(...) code.

在此处使用:

if ( _dlg != null ){
   $(_dlg).dialog('destroy');
}
_dlg = $("#divSearch").load('youriFrame.aspx').dialog({
            close: function() { $(this).dialog('destroy'); },
            open: function () {
                $(this).closest(".ui-dialog")
                .find(".ui-dialog-titlebar-close")
                .removeClass("ui-dialog-titlebar-close");
            },
            title: "Search Employee",
            show: "scale",
            modal: true,
            width: '55%',
            height: 500
        });

答案 1 :(得分:0)

之前我遇到过类似的问题,但它是使用bootstraps模式。我看到的问题是我多次使用同一个模态的实例。您可能必须创建不同的,而不是重复使用多个。

从我的经历中继续。