Question

我有取消按钮，在JQuery模式对话框上无法正常工作，我真的很感激一些帮助。当我点击模态的取消按钮时，这是我得到的例外：

0x800a139e - JavaScript运行时错误：无法在对话框上调用方法在初始化之前;试图调用方法'关闭'

这是我在模态上显示的局部视图：

@model Models.Office
@{  
    Layout = null;
}
 @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/bootstrap")
    @Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<script type="text/javascript">
    function CloseModal() {
        $(this).dialog("close");
        }
</script>


@*@using (Ajax.BeginForm("EditOffice", "Admin", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "edit-Dialog" }))*@
@using (Html.BeginForm("CreateEditOffice", "Admin", "POST"))
{ 
    <fieldset>
        <legend>Office</legend>
        @if (ViewBag.IsUpdate == true)
        { 
            @Html.HiddenFor(model => model.OfficeId)
        }

        <div class="display-label">
            @Html.DisplayNameFor(model => model.OfficeName)
        </div>
        <div class="Input-medium">
            @Html.EditorFor(model => model.OfficeName)
            @Html.ValidationMessageFor(model => Model.OfficeName)
        </div>

        <div class="display-label">
            @Html.DisplayNameFor(model => model.SupportNo)
        </div>
        <div class="Input-medium">
            @Html.EditorFor(model => model.SupportNo)
            @Html.ValidationMessageFor(model => model.SupportNo)
        </div>

        <div class="display-label">
            @Html.DisplayNameFor(model => model.SupportEmail)
        </div>
        <div class="Input-medium">
            @Html.EditorFor(model => model.SupportEmail)
            @Html.ValidationMessageFor(model => model.SupportEmail)
        </div>
        <div class="display-label">
            @Html.DisplayNameFor(model => model.SupportFax)
        </div>
        <div class="Input-medium">
            @Html.EditorFor(model => model.SupportFax)
            @Html.ValidationMessageFor(model => model.SupportFax)
        </div>

        <div class="display-label">
            @Html.DisplayNameFor(model => model.SupportFtp)
        </div>
        <div class="Input-medium">
            @Html.EditorFor(model => model.SupportFtp)
            @Html.ValidationMessageFor(model => model.SupportFtp)
        </div>
    </fieldset>
    <br />
    <div class="pull-right">
        @if (ViewBag.IsUpdate == true)
        { 
            <button class="btn btn-primary" type="submit" id="btnUpdate" name="Command" value ="Update">Update</button>
        }
        else
        { 
            <button class="btn btn-primary" type="submit" id="btnSave" name="Command" value="Save">Save</button>
        }
            <button type="button" id="Cancel" class="btn btn-primary" onclick="CloseModal()">Cancel</button>
    </div>
}

然后这是父视图上的脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $(".editDialog").on("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Edit Office',
                autoOpen: false,
                resizable: false,
                height: 450,
                width: 380,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);
                },
                close: function (event, ui) {
                    $("#dialog-edit").dialog().dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });
    });   
</script>

我做错了什么????

Answer 1

onclick="CloseModal()"等内联处理程序不会在被调用的函数内设置this。您必须传递this内联参考：

onclick="CloseModal(this)"

function CloseModal(el) {
    $(el).dialog("close");
}

或者只是使用jQuery附加处理程序，它将在事件处理程序中设置this引用：

//instead of onclick="", attach the handler inside DOM ready:
$(function() {
    $('#Cancel').click(CloseModal);
});
function CloseModal() {
    $(this).dialog("close");
}

这假定在页面结构完成呈现时存在#Cancel并且您的标记有效（没有重复的ID）。

Answer 2

$（this）.dialog（“close”）;

而不是“this”使用对话框的名称，例如.. $（“header”）。dialog（“close”）;

它对我有用。

此致

巴斯卡尔。

0x800a139e - JavaScript运行时错误：在初始化之前无法调用对话框上的方法;试图调用方法'关闭'

2 个答案: