部分视图中的多个模态框有时不会打开

时间：2013-01-12 04:25:11

标签： javascript jquery asp.net-mvc

所以我在Partial View中有三个模态框。

1）runDates 2）errorCodes 3）testExceptions

前两个对话框中包含ajax请求。第二个中的ajax请求将禁用第一个和第三个对话框。当我点击第一个和第三个时，它们将无法打开。如果我不使用第二个对话框，一切都很完美。

我还为每个模态框分配了Javascript文件。请建议，我只是对这个感到难过。提前谢谢！

查看

@model RunLog.Domain.Entities.RunLogEntry
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";

}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/runLogEntry.js")" type="text/javascript"></script>

<script type="text/javascript">
    var runlogListErrorsUrl = '@Url.Action("ListErrorCodes", "RunLogEntry")';

</script>
<fieldset>
    <legend>Enter a new Run Log Entry</legend>
    @using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
    {
        <div id="main">
            @Html.Partial("_RunLogEntryPartialView", Model)
        </div>
    }
</fieldset>
<script src="@Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>

部分视图 

@model RunLog.Domain.Entities.RunLogEntry
<script src="@Url.Content("~/Scripts/runDates.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/testexception.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script>

<div class="bodyContent">
    @if (Model.RunDatesDisplay != null && Model.RunDatesDisplay.Count() > 0)
    {
        <span class="leftContent">
            @Html.Label("Run Dates")
        </span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
            Click here to Select/View Run Dates</span>
            <br />
            <span id="RunDatesDisplayy" style="cursor: pointer; text-decoration: underline;">
            </span></span>
    }
</div>

<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 400px; height: 450px; display: none;">
    <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
        <thead>
            <tr>
                <th>
                    Run Dates:
                </th>
                <th>
                    Minimum Replicate:
                </th>
            </tr>
        </thead>
        <tbody>
            @Html.EditorFor(x => x.RunDatesDisplay)
        </tbody>
    </table>
</div>


<div class="bodyContent">
    @if (Model.TestExceptionDisplay != null && Model.TestExceptionDisplay.Count() > 0)
    {
        <span class="leftContent">
            @Html.Label("Test Exceptions")
        </span><span class="rightContent"><span id="TestExceptionChildDialogLink" class="treeViewLink">
            Click here to View Test Exceptions</span>
            <br />
            <span id="TestExceptionDisplayy"></span></span>
    }
</div>
<div id="testExceptiontreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 800px; height: 450px; display: none;">
    <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
        <thead>
            <tr>
                <th>
                    Exception
                </th>
                <th>
                    Frequency
                </th>
                <th>
                    Comment
                </th>
                <th>
                    Replicate Range
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model.TestExceptionDisplay != null)
            {
                @Html.EditorFor(x => x.TestExceptionDisplay)
            }
        </tbody>
    </table>
</div>


<div class="bodyContent">
    <span class="leftContent">
        @Html.Label("Error Code")
    </span><span class="rightContent"><span id="ChildDialogLink" class="treeViewLink">Click
        here to Select Error Codes</span>
        <br />
        <span id="ErrorCodeDisplay" style="cursor: pointer; text-decoration: underline;">@(Model.ErrorDescription)</span>
        @Html.HiddenFor(model => model.ErrorDescription)
    </span>
</div>

<div id="treeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 800px; height: 450px; display:none;">
    <div id="errorCodes">
        @Html.RenderTree(CacheHelper.ErrorCodes(), ec => ec.Name, ec => ec.Children.ToList(), ec => (ec.ID).ToString(), null, "e")
    </div>
    <div id="inputReps" style="display: none;">
    </div>
</div>
<script src="@Url.Content("~/Scripts/errorCode.js")" type="text/javascript"></script>

树视图错误代码的Javascript文件 

var errorTextArea;
var ErrorCodeDialog;


$(document).ready(function () {
    $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    $("#errorCodes ul").treeview({
        collapsed: true,
        prerendered: false
    });


    ErrorCodeDialog = $("#treeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false, modal: false, resizable: false, draggable: true, title: 'Select and input Error details', width: 480, height: 500,

        buttons: { Select: function () {
            var btnText = '';
            $('.ui-dialog-buttonpane :button').each(function () {
                if ($(this).text() == 'Select') {
                    btnText = 'Select';
                    $(this).text('Apply');
                    $("#errorCodes").attr("style", "display:none;");
                    $("#inputReps").attr("style", "display:inline;");
                }
                else if ($(this).text() == 'Apply') {
                    btnText = 'Apply';
                    $(this).text('Select');
                    $("#errorCodes").attr("style", "display:inline;");
                    $("#inputReps").attr("style", "display:none;");
                }
            });

            if (btnText == 'Select') {
                errorTextArea = "";
                $("#errorCodes :checkbox:checked").each(function () {
                    var v = $(this).val();
                    if (errorTextArea.length > 0) {
                        errorTextArea = errorTextArea + " | ";
                    }
                    errorTextArea = errorTextArea + v;
                });
                if ($("#LogType").val() == "Run")
                //$("#inputReps").load("/RunLogEntry/ListErrorCodes", { ID: $("#ID").val(), ErrorCodes: errorTextArea });
                    $("#inputReps").load(runlogListErrorsUrl, { ID: $("#ID").val(), ErrorCodes: errorTextArea });
                else
                //$("#inputReps").load("/ServiceEntry/ListErrorCodes", { ID: $("#ID").val(), ErrorCodes: errorTextArea });
                    $("#inputReps").load(serviceListErrorsUrl, { ID: $("#ID").val(), ErrorCodes: errorTextArea });

            }
            else {
                errorTextArea = "";
                var i = 0;
                $("#inputReps :input").each(function () {
                    var v = $(this).val();
                    if (errorTextArea.length > 0) {

                        if ($(this).attr('type') == 'hidden')
                            errorTextArea = errorTextArea + ' | ' + v;
                        else {
                            if (i == 0) {
                                errorTextArea = errorTextArea + ' ~ L ' + v;
                                i = 1;
                            }
                            else {
                                errorTextArea = errorTextArea + ' ~ P ' + v;
                                i = 0;
                            }

                        }
                    }
                    else
                        errorTextArea = v;
                });

                if (errorTextArea.Length > 0) {
                    errorTextArea = errorTextArea.substr(0, errorTextArea.length - 1);
                }
                $("#ErrorCodeDisplay").text(errorTextArea);
                $("#ErrorDescription").val(errorTextArea);
                ErrorCodeDialog.dialog("close");
            }
        },
            Cancel: function () {
                ErrorCodeDialog.dialog("close");
                //                $(this).dialog("close");

                //                if ($(this).text() == 'Cancel') {
                //                    $(this).dialog("close");
                //                }
            }
        }
    });

    $('#ChildDialogLink').click(function () {
        $(ErrorCodeDialog).dialog("open");
        //        return ErrorCodeDialog.dialog('open');
        //replace the div id with the id of the button/form 


        //        $(ErrorCodeDialog).dialog("open"); 
    });
});

runDatestreeview的Javascript文件 

var RunDialog;

$(document).ready(function () {
    $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

    RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false,
        modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields & Test Exceptions:',
        width: 600, height: 500, position: 'center',
        //        open: function (type, data) {
        //        },
        buttons: { UpdatePage: function () {
            $.post("/RunLogEntry/LogFileConfirmation",
              $("#form").serialize(),
               function (data) {
                   $("#runDatestreeview").remove();
                   $("#testExceptiontreeview").remove();
                   $("#main").html(data);
                   $(RunDialog).dialog("close");
               }, "html");
        },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    RunDialog.closest("div.ui-dialog").appendTo("#form");

    $(document).on("click", "#RunDatesChildDialogLink", function () {
        //    $('#RunDatesChildDialogLink').click(function () {
        $(RunDialog).dialog("open");
    });

    //Region Auto-Open Modal Box
    var modalOpen = $("#LogModals").val();

    if (modalOpen == "0") {
        $("#runDatestreeview").dialog({ autoOpen: true });
    }
    //End Auto Open Modab Box Region

    //    $("#runDatestreeview").parent().appendTo("form");

});

1 个答案:

答案 0 :(得分：0)

您是否尝试过对话框（“破坏”）而不是对话框（“关闭”）？

相关问题
最新问题