Question

我有一个模态窗口，用于更新或添加新对象Store。

此模式包含两个属性的级联下拉列表：Department和District。

应该如何运作：

我们首先确定我们是否处于创建或更新Store的情况。

如果新 Store模式打开并使用jQuery，我们会为District下拉列表提供默认值（因为没有选择Department尚未）。

    <script type="text/javascript">

        var wasclicked = 0;
        var $this = this;

        $(document).ready(function () {

            document.getElementById("modalbutton").onclick = function () {
                //is AddNew Store button is hitted, this var = 1
                wasclicked = 1;
            };

            $('#modal-action-store').on('hidden.bs.modal', function () {
                //global.wasclicked = 0;
                wasclicked = 0;
                $(this).removeData('bs.modal');
            });

            $('#modal-action-store').on('shown.bs.modal', function (e) {
                console.log($('#DistrictID').length);
                //if wasclicked equals 1 that means we are in the AddNew Store scenario.
                if (wasclicked == 1) {
                    //a default value is sent to District dropdownlist
                    var items = "<option value='0'>-- Seleccione Distrito --</option>";
                    $('#DistrictID').html(items);
                };


            });
        });

</script>

但是，此时，在添加默认值后，在几分之一秒后，该值将被删除。

我尝试了什么

我注意到当我删除这行代码时：

$(this).removeData('bs.modal');

从上一个脚本开始，它可以正常工作，但如果我需要使用模态编辑另一个Store，我需要该代码以清除模态中的数据。

另外，当我调试项目时，调试器没有停在该行的断点处，所以我不确定为什么它会以某种方式在后台执行？是因为它包含在函数document.ready()中吗？

我已经挣扎了好几天了。我感谢任何有用的评论。

有条件的信息：

项目的在线版本：

这是一个用于调试的在线版本：

http://plataformafantasypark.azurewebsites.net/

用户：adelgado密码：$ Adelgado33

在菜单＆＃39; Tiendas＆＃39; - ＆GT; ＆＃39; Registro＆＃39;

调用模式的按钮：

<div class="btn-group" id="modalbutton">
    <a id="createEditStoreModal" data-toggle="modal" asp-action="Create" 
         data-target="#modal-action-store" class="btn btn-primary">
            <i class="glyphicon glyphicon-plus"></i>  NEW STORE
        </a>
</div>

模态：

@model Application.Models.ApplicationviewModels.StoreIndexData
@using Application.Models

<form asp-action="Create" role="form">    
        @await Html.PartialAsync("_ModalHeader", new ModalHeader
    { Heading = String.Format("Actualización de Modelo: Tiendas") })

        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="modal-body form-horizontal">
            <div class="form-group">
                <label asp-for="DepartmentID" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <select asp-for="DepartmentID" class="form-control"
                            asp-items="@(new SelectList(@ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">Distrito</label>
                <div class="col-md-10">
                    <select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
                            asp-items="@(new SelectList(@ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
                </div>
            </div>
            {... more elements}
       </div>
</form>

Answer 1

为什么不做（？）：

之类的事情

$("#modalbutton").on('click', function () {
       //is AddNew Store button is hitted, this var = 1

       wasclicked = 1;
 });

Answer 2

我们的想法是手动控制从/ Stores / Create收到的远程内容的加载和插入。我不是为了测试这个，而是试一试。

你需要摆脱/注释掉现有的.on('showN.bs.modal')处理程序，你可能不得不去掉调用模态的<a>标签上的href，不确定。

$('#modal-action-store').on('show.bs.modal', function (e) {
    if (wasclicked == 1) {
        // load the form, once it's done loading modify it as needed
        $('#modal-action-store').find('.modal-content').load('/Stores/Create', function () {
            $('#DistrictID').html('<option value='0'>-- Seleccione Distrito --</option>');
        });
    }
});

jQuery：脚本的结果在执行后被删除 - 在后台运行removeData（）？

2 个答案: