jQuery：与在不适当的时间执行的removeData（）冲突 [英] jQuery: Conflict with removeData() executing at inadequate times

问题描述

我有一个用于更新或添加新对象的模态窗口存储。

此模态被调用远程从ASP.NET中构造的GET方法加载哪些信息。

调用模式的按钮：

 < div class =btn-groupid =modalbutton> 
< a id =createEditStoreModaldata-toggle =modalasp-action =Create
 data-target =＃modal-action-storeclass =btn btn-primary > 
< i class =glyphicon glyphicon-plus>< / i>新店
< / a> 
< / div> 
  

模式的Html：

  @model Application.Models.ApplicationviewModels.StoreIndexData 
 @using Application.Models 
 
< form asp-action =Create role =形式> 
 @await Html.PartialAsync（_ ModalHeader，new ModalHeader 
 {Heading = String.Format（ActualizacióndeModelo：Tiendas）}）
 
< div asp- validation-summary =ModelOnlyclass =text-danger>< / div> 
< div class =modal-body form-horizo​​ntal> 
< div class =form-group> 
< label asp-for =DepartmentIDclass =col-md-2 control-label>< / label> 
< div class =col-md-10> 
< select asp-for =DepartmentIDclass =form-control
 asp-items =@（new SelectList（@ ViewBag.ListofDepartment，DepartmentID，DepartmentName）） >< /选择> 
< / div> 
< / div> 
< div class =form-group> 
< label class =col-md-2 control-label> Distrito< / label> 
< div class =col-md-10> 
< select class =form-controlid =DistrictIDname =DistrictIDasp-for =DistrictID
 asp-items =@（new SelectList（@ ViewBag.ListofDistrict， DistrictID， DistrictName））>< /选择> 
< / div> 
< / div> 
 {...更多元素} 
< / div> 
< / form> 
  

GET方法：

  public IActionResult Create（int？id）
 {
 List< Department> DepartmentList = new List< Department>（）; 
 DepartmentList =（来自_context.Departments中的部门
选择部门）.ToList（）; 
 DepartmentList.Insert（0，new Department {DepartmentID = 0，DepartmentName = -  Seleccione Departamento  - }）; 
 ViewBag.ListofDepartment = DepartmentList; 
 
 StoreIndexData edit = new StoreIndexData（）; 
列表<区> ListofDistrict = new List< District>（）; 
 ListofDistrict.Insert（0，new District {DistrictID = 0，DistrictName = -  PRUEBA  - }）; 
 ViewBag.ListofDistrict = ListofDistrict; 
 
返回PartialView（〜/ Views / Shared / Stores / _Create.cshtml）; 
} 
  

问题：

一旦模态打开，我有以下jQuery将值赋予 DistrictID ：

 < script type =text / javascript> 
 
 var wasclicked = 0; 
 var $ this = this; 
 
 $（document）.ready（function（）{
 
 document.getElementById（modalbutton）。onclick = function（）{
 //是AddNew商店按钮被点击，这个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）; 
 //如果wasclicked等于1，则表示我们处于AddNew Store场景。
 if（wasclicked == 1）{
 //默认值发送到区域下拉列表
 var items =< option value ='0'>  -  Seleccione Distrito  - < / option>; 
 $（'＃DistrictID'）。html（items）; 
 }; 
}）; 
}）; 
< / script> 
  

现在的问题是在执行jQuery行之后，分配给<$的值c $ c> DistrictID 被以下内容覆盖：

  ViewBag.ListofDistrict = ListofDistrict; // -  PRUEBA  - 
  

此行已丢失：

  var items =< option value ='0'>  -  Seleccione Distrito  - < / option>; 
  

我怀疑来自控制器的信息会覆盖来自模式的jQuery的任何结果。

调试后我发现了三个不同的时刻：

时刻1：我们第一次打开模式

• 这次模式在jQuery执行之前打开


• DistrictID 已经在我们从jQuery赋值之前来自GET方法的值

时刻2 - 第2部分：来自jQuery的值已分配

< img src =https://i.stack.imgur.com/zQci5.jpgalt =在此输入图像说明>

• jQuery的值分配给 DistrictID


• 此值将被GET操作的结果覆盖

问题：

任何人都可以解释或帮我理解可能导致这种情况的原因？我还能做些什么来确定背后的原因？

解决方案

尝试将html的分配移动到区域ID 从主视图到模态popUp视图的 document.ready 。

  @model Application.Models.ApplicationviewModels.StoreIndexData 
 @using Application.Models 
 
< form asp-action =Createrole =form > 
 @await Html.PartialAsync（_ ModalHeader，new ModalHeader 
 {Heading = String.Format（ActualizacióndeModelo：Tiendas）}）
 
< div asp- validation-summary =ModelOnlyclass =text-danger>< / div> 
< div class =modal-body form-horizo​​ntal> 
< div class =form-group> 
< label asp-for =DepartmentIDclass =col-md-2 control-label>< / label> 
< div class =col-md-10> 
< select asp-for =DepartmentIDclass =form-control
 asp-items =@（new SelectList（@ ViewBag.ListofDepartment，DepartmentID，DepartmentName）） >< /选择> 
< / div> 
< / div> 
< div class =form-group> 
< label class =col-md-2 control-label> Distrito< / label> 
< div class =col-md-10> 
< select class =form-controlid =DistrictIDname =DistrictIDasp-for =DistrictID
 asp-items =@（new SelectList（@ ViewBag.ListofDistrict， DistrictID， DistrictName））>< /选择> 
< / div> 
< / div> 
 {...更多元素} 
< / div> 
< / form> 
 
< script type =text / javascript> 
 
 $（document）.ready（function（）{
 //如果wasclicked等于1表示我们处于AddNew Store场景。
 if（wasclicked == 1） {
 //默认值发送到区域下拉列表
 var items =< option value ='0'>  -  Seleccione Distrito  - < / option>; 
 $（'＃DistrictID'）。html（items）; 
} 
}）; 
 
< / script> 
  

PS：也可以使用默认选项。请参阅以下代码。

 < div class =form-group> 
< label class =col-md-2 control-label> Distrito< / label> 
< div class =col-md-10> 
< select class =form-controlid =DistrictIDname =DistrictIDasp-for =DistrictIDasp-items =@（new SelectList（@ ViewBag.ListofDistrict，DistrictID， DistrictName））> 
< option value ='0'>  -  Seleccione Distrito  - < / option> 
< / select> 
< / div> 
< / div> 
  

I have a modal window used to update or add a new object Store.

This modal is called remotely which information is loaded from a GET method constructed in ASP.NET.

Button that calls the modal:

<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>

Html of the modal:

@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>

GET Method:

    public IActionResult Create(int? id)
    {
        List<Department> DepartmentList = new List<Department>();
        DepartmentList = (from department in _context.Departments
                          select department).ToList();
        DepartmentList.Insert(0, new Department { DepartmentID = 0, DepartmentName = "-- Seleccione Departamento --" });
        ViewBag.ListofDepartment = DepartmentList;

        StoreIndexData edit = new StoreIndexData();
        List<District> ListofDistrict = new List<District>();
        ListofDistrict.Insert(0, new District { DistrictID = 0, DistrictName = "-- PRUEBA --" });
        ViewBag.ListofDistrict = ListofDistrict;

        return PartialView("~/Views/Shared/Stores/_Create.cshtml");
    }

The problem:

I have the following jQuery which asigns a value to DistrictID once the modal opens:

<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>

The problem right now is that after this line jQuery is executed, the value that was assigned to DistrictID gets overwritten by :

  ViewBag.ListofDistrict = ListofDistrict; //"-- PRUEBA --"

And this line is lost:

var items = "<option value='0'>-- Seleccione Distrito --</option>";

What I suspect is that the information coming from the Controller overwrites any result from jQuery over the in the modal.

After debugging I have identified three diferent moments:

Moment 1: First time we open the modal

• The modal hasn't opened yet and the jQuery executes
• For this reason it does not identify DistrictID
• The result from the GET Action fills the modal's inputs.

Moment 2 - Part 1: Second time we open the modal

• This time the modal opens before the jQuery is executed
• The DistrictID has the value from the GET Method before we assign the value from jQuery

Moment 2 - Part 2: When the value from jQuery is assigned

• The value from jQuery is assigned to DistrictID
• This value will be overwritten by the result of the GET Action

Question:

Can anyone explain or help me understand what might be causing this? What else can I do to identify the reason behind this?

解决方案

Trying moving the assigning of html to districtID from your main view to the document.ready of modal popUp view.

    @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>

<script type="text/javascript">

    $(document).ready(function () {
            //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>

PS: Default option can be also be used. refer the below code.

<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"))">
     <option value='0'>-- Seleccione Distrito --</option>
  </select>
 </div>
</div>

这篇关于jQuery：与在不适当的时间执行的removeData（）冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！