jQuery inside an inline template

2 posts, 0 answers
  1. Shane
    Shane avatar
    8 posts
    Member since:
    Nov 2015

    Posted 14 Apr Link to this post

    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?

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 18 Apr Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top