2016-04-15 13 views
1

インラインテンプレート内でjQueryを実行することはできますか?剣道インラインテンプレート内のjQuery

ここに私が達成しようとしているものがあります。私は、ユーザーが自分のコントローラーにサブミットするために記入するフォームを含むインラインテンプレートを持っています。私はフォーム上にラジオボタンのセットを持っています。彼らが最後のラジオボタンをクリックすると、私は自分のテキストエリアを表示し、フォームの提出に必要となります。ここで

は、テンプレートを使用して、ウィンドウを呼び出すコードは次のとおりです。

function onRejectClick(e) { 
    e.preventDefault(); 

    var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
    var wnd = $("#Reject").data("kendoWindow"); 

    wnd.content(rejectTemplate(dataItem)); 
    wnd.center().open(); 
} 

ここに私のテンプレートです:

<script type="text/x-kendo-template" id="rejectTemplate"> 
<div id="reject-container"> 
    @using (Html.BeginForm("RejectConcern", "Filter", FormMethod.Post, new { @id = "rejectConcern", @style = "width:100%", @class = "k-content" })) 
    { 
     @Html.AntiForgeryToken() 
     <input type="hidden" id="id" name="id" value="#= data.id #" /> 
     <table> 
      <tr> 
       <td valign="top"> 
        <label>Reason</label> 
       </td> 
       <td> 
        <label> 
         @Html.RadioButton("reasonForRejection", "NotQuestion", false, new { @id = "reasonForRejection" })Concern is not a question and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Inappropriate", false, new { @id = "reasonForRejection" })Concern contains inappropriate language and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Irrelevant", false, new { @id = "reasonForRejection" })Concern is not relevant to our business/operation and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Personal", false, new { @id = "reasonForRejection" })Concern is about an individual, a specific group, or area and will not be answered 
        </label> 
        <label> 
         @Html.RadioButton("reasonForRejection", "Other", false, new { @id = "reasonForRejection" })Other 
        </label> 
       </td> 
      </tr> 
      <tr> 
       <td> </td> 
       <td> 
       @Html.TextArea("answer", 
        new 
        { 
         @id = "answer", 
         @name = "answer", 
         @class = "k-textbox", 
         @placeholder = "Enter the reason for rejection here.", 
         @validationmessage = "The reason for rejection is required.", 
         @style = "width: 600px; min-width:600px; max-width:69%; height:200px", 
         @maxlength = "1000" 
        } 
       ) 
       </td> 
      </tr> 
      <tr> 
       <td> </td> 
       <td> 
        <div class="actions"> 
         <button type="submit" id="rejectConcernButton" class="k-button">Submit</button> 
        </div> 
       </td> 
      </tr> 
     </table> 
    } 
</div> 
</script> 

にはどうすれば表示/回答テキストエリアのフィールドを非表示にし、それを作るためにjQueryを使用することができます最後のラジオボタンがオンになっているかどうかに応じて必要ですか? jQueryが不可能な場合は、通常のJavaScript経由で行うことができますか?

答えて

0

これはjavascriptで行うことができますが、この場合はjQueryで行うことができます。つまり、JavaScriptコードを使用することができれば、jQueryコードも使用できます。ウィジェットの主な要素にイベントを設定することをお勧めします。すべてのウィジェットにはelementというプロパティがあり、これはウィジェットのメインのhtml要素を提供します。あなたがウィジェット内のすべてのラジオボックスにイベントを設定するのであれば、あなたは、テンプレートを操作することができるようになります例えば、コンテンツを生成:

$($("#listView").data("kendoListView").element).on('change', 'input[type="radio"]', function() { }); 

Demo

私はあなたが使用しているウィジェットのかわからないんだけど私はこのデモでListViewを使用しました。