2017-01-17 14 views
0

Вот короткий TL; DR версия:события изменения прекращает стрельбу после того, как jqueryui всплывающих окна открываются и закрываются

У меня есть OnChange события против выбора списка, который прекращает стрельбу

Есть ли какие-либо проблемы с использованием JQuery против элемента id, т.е. $("#Customer_ID").change, если этот элемент находится внутри всплывающего окна jqueryui, заполненного частичным представлением. В дополнении к этому у меня есть два различные всплывающие окна заселены различными частичных виды, которые разделяют тот же $("#Customer_ID").change JavaScript

У меня есть страница с двумя дивами для Jquery UI всплывающих окон

Когда я нажимаю в камере jqgrid, я всплывающий соответствующий диалог (Edit или New)

всплывающие окна, в свою очередь заселена частичным видом из контроллера

Это прекрасно работает

у меня есть три уровня каскадных г в этих всплывающих окнах. В большинстве случаев они работают правильно. После нескольких открытий и закрытий всплывающих окон, однако динамические выпадения перестают работать

В этот момент динамический выпадающий jscript загружается нормально, но похоже, что событие изменения не запускается.

Я подозреваю, что это потому, что у меня есть два всплывающих окна с одинаково названными элементами управления?

Во всяком случае здесь некоторые сокращенные фрагменты кода

_Layout.cshtml

ли ссылка на JS, что придает все JQueryui материал

<!-- Logic to setup edit,new,delete popups --> 
<script src="~/Scripts/Layout.js" type="text/javascript"></script> 

Layout.js

Содержит код для настройки всплывающих окон и ome другие вещи. Вот только часть для создания всплывающего окна:

 $("#dialog-create").dialog({ 
      title: 'New', 
      autoOpen: false, 
      resizable: true, 
      width: 800, 
      height: 440, // this allows the dialog to correctly estimate the middle of the viewport 
      show: { effect: 'fade', duration: 100 }, 
      modal: true, 
      open: function (event, ui) { 
       if (urlNew) $(this).load(urlNew); 
      }, 
     }); 

TasksWeeklyClient.cshtml

Это на самом деле имеет jqGrid на нем. Нажатие на ячейку всплывает, например, всплывающее окно создания.

<!-- edit, new, delete popups --> 
<div id="dialog-edit" style="display: none; z-index: 2000;"> 
</div> 

<div id="dialog-create" style="display: none; z-index: 2001;"> 
</div> 

Create.cshtml

Это подается с помощью контроллера, который возвращает частичное представление. Здесь возникают проблемы. Падение Client_ID каскадов в раскрывающийся список CustomerProject_ID. После нескольких закрытий и открытия он перестает работать.Это также имеет ссылку на TasksDialogs.js, который раскрывающееся все каскадные вниз вещи (Каскадирование падение вниз является предметом другой вопрос здесь: cascading drop downs repeatedly populated

(этот код находится в задачах просмотра папки)

<div class="form-group"> 
    @Html.LabelFor(model => model.Customer_ID, "Customer & Project", htmlAttributes: new { @class = "control-label col-md-6 text-md-left" }) 
    <div class="col-md-12"> 
     @Html.DropDownList("Customer_ID", null, htmlAttributes: new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.Customer_ID, "", new { @class = "text-danger" }) 
    </div> 
    <div class="col-md-12"> 
     @Html.DropDownList("CustomerProject_ID", null, htmlAttributes: new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.CustomerProject_ID, "", new { @class = "text-danger" }) 
    </div> 

TaskDialogs.js

Наконец, мы имеем этот сценарий. Обычно это работает, но после того, как несколько всплывающих окон открывается и закрывается, CustomerID.change больше не отображается в консоли.

Вы можете видеть, что я пробовал два разных способа крепления события изменения. Оба проявляют тот же самый симптом.

$(document).ready(function() { 
    console.log("TasksDialog.js ready"); 

    console.log($("#Customer_ID")); 
    //When Customer is changed reload Project 
    // Project function reloads project tasks 
    $("#Customer_ID").on("change", 
// $("#Customer_ID").change(
     function() { 
      console.log("CustomerID.change"); 
      // refresh projects 
      refreshProjectFromClient(); 
     } 
     ); 

Я не знаю, что мне нужно отправить код контроллера. В этой части все работает нормально.

ответ

0

В JavaScript, который управляет динамические спады падения я использовал

$("#Customer_ID") 

для обозначения полей на двух различных диалогах.

Оказывается, мне нужно использовать эти вместо того, чтобы конкретно относится к области Я хочу:

$(div#dialog-create #Customer_ID") 

$(div#dialog-edit #Customer_ID") 

Я думаю, что, возможно, событие изменения не привязываясь должным образом по той же причине. На данный момент я обошел это путем жесткого кодирования изменения в элементе управления в виде cshtml следующим образом:

@Html.DropDownList("Customer_ID", null, 
htmlAttributes: 
new { 
@class = "form-control", 
@onchange= "refreshProjectFromClient()" 
})