[Solved] jQuery inside an inline template

[Shane]

Is it possible to have jQuery run inside of an inline template?

Here's what I'm trying to accomplish.  I have an inline template that contains a form that the user fills out to submit back to my controller.  I have a set of radio buttons on the form.  If they click on the last radio button, I need my textarea to appear and be required for form submission.  

Here's my template:

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

How can I use jQuery to show/hide the answer textarea field depending on if the last radio button is checked or not?  If jQuery isn't possible, can it be done via regular JavaScript?

[Dimiter Topalov]

Hello Shane,

You can use jQuery to achieve the desired behavior after the template has been rendered on the page, adding the custom logic in the View's script tag, e.g.:

$(function () {
$('#template-container').html($('#rejectTemplate').html());

$('input[type="radio" name="reasonForRejection"]').change(function () {
if (this.value === 'Other') {
$('#answer').attr('required', 'required').show();
} else {
$('#answer').removeAttr('required').hide();
}
})
});

Let me know, if you need further assistance.

Regards,
Dimiter Topalov
Telerik