2017-01-17 17 views
0

を開閉した後に発射を停止するここで短期TLです; DRのバージョン:変更イベントがjqueryuiポップアップが

私は

を発射停止し、選択リストに対してのonchangeイベントを持っている要素に対してjQueryのを使用して任意の問題がありますid ie $("#Customer_ID").change(その要素が部分ビューから取り込まれたjqueryuiポップアップ内にある場合)。これに加えて、私はjqueryのUIのポップアップ用の2つのdiv

私はjqgridでセルをクリックすると、私はポップアップでページを持っている同じ$("#Customer_ID").change javascriptの

を共有する異なる部分図によって移入二つの異なるポップアップを持っています適切なダイアログ(編集または新)

ポップアップが順番にコントローラからの部分図によって移入され

これは私がカスケードDの3つのレベルがあり

正常に動作しますこれらのポップアップの下降。ほとんどの場合、彼らは正しく動作します。ポップアップをいくつか開いたり閉じたりすると、動的ドロップダウンが機能しなくなる

この時点で、ダイナミックドロップダウンjscriptは正常にロードされていますが、変更イベントが発生していないようです。

私は同じ名前のコントロールを持つ2つのポップアップを持っていると思われます。とにかくここ

は、いくつかの要約コード断片である

_Layout.cshtml

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

Layout.js

すべてJQueryuiのものを添付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

これは部分的なビューを返し、コントローラによって供給されます。これが問題の始まりです。 Customer_IDドロップダウンは、CustomerProject_IDドロップダウンにカスケードします。いくつかの閉鎖して開いた後にも動作を停止します。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> 
:これはまた、(カスケードドロップダウンここで別の質問の対象となるすべてのカスケードがものをドロップダウン持っ TasksDialogs.jsへの参照を持っています

TaskDialogs.js

は、最後に私たちは、このスクリプトを持っている。通常、これは動作しますが、いくつかのポップアップが開閉した後、CustomerID.changeはコンソールに表示されなくなりました。

私は、変更イベントをアタッチする2つの方法を試しました。両方とも同じ症状を示します。

$(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(); 
     } 
     ); 

コントローラコードを投稿する必要があるかどうかわかりません。その部分はすべて正常に動作します。私は、2つの異なるダイアログ上のフィールドを参照する

$("#Customer_ID") 

を用いた動的なドロップダウンを管理JavaScriptで

答えて

0

は、私は、特に私が欲しいのフィールドを参照するために、代わりにこれらを使用する必要が判明:

$(div#dialog-create #Customer_ID") 

$(div#dialog-edit #Customer_ID") 

私はおそらく変更イベントは、同じ理由で正しく接続されていないと思います。今のところ私はこのようにcshtmlビューのコントロールに変更をハードコードすることで回避しました。

@Html.DropDownList("Customer_ID", null, 
htmlAttributes: 
new { 
@class = "form-control", 
@onchange= "refreshProjectFromClient()" 
}) 
関連する問題