Html.TextBoxFor not rendering when added by a library

I'm currently working on a website at work. Everything's been working so far, except when I've moved a function to a library so it can be reusable.

The function is a click event for a set of two radio buttons. When the "Yes" button is clicked, a textbox and it's label need to appear. When the "No" button is clicked, they need to disappear.

The label is appearing just fine on the "Yes" click. And the function as a whole worked perfectly on the page itself. However, when I moved the script to a library for reusability within the project, the textbox no longer appears. I have tried swapping out for an input tag, with similar results.

The relevant html:

@ModelType PROJECT.Form

@Code
    ViewData("Title") = "PageTitle"
    Layout = "~/Views/Shared/_LayoutPage.Desktop.vbhtml"
End Code
<script>
    $(function () { initFunction() })
</script>

@Using Html.BeginForm("Process", "Home")
    @Html.AntiForgeryToken()
    @Html.Hidden("page", 4)
    @<div id="formColumn" class="grid_19 alpha">
        <h3>Process Title</h3>
        <fieldset>
            <legend>Page Title</legend>
            <ol class="grid_18 push_1">
                //a couple yes/no questions here, works fine
                <li><label>Question 3</label></li>
                <li>
                    <ol id="appendHere"class="horizontalList clearfix">
                        <li><label>Yes</label></li>
                        <li>@Html.RadioButtonFor(Function(a) a.Q3Radio, True)</li>
                        <li><label>No</label></li>
                        <li>@Html.RadioButtonFor(Function(a) a.Q3Radio, False)</li>
                    </ol>
                </li>
                //more working stuff
            </ol>
            <div class="clear"></div> 
            <button name="submit" id="submit" value="submit" class="push_1">Submit</button>
            <button name="cancel" id="cancel" value="cancel" class="push_1">Cancel</button>
            <button name="back" id="back" value="back" class="push_1">Back</button>
        </fieldset>
    </div>
End Using

The javascript:

function initFunction() {
    $(function () { $("input[name=Q3Radio]").click(function () { handleQ3Check(this) }) })

    var check = true
    function handleQ3Check(elem) {
        if (elem.value == "True") {
                if (check) {
                    $('#appendHere').append('<li class="appended"><label>Amount: $</label></li><li class="appended">@Html.TextBoxFor(Function(a) a.appendAmount)</li>')
                    $(function () { $("input[name=appendAmount]").blur(function () { handleFees(this, 'stuff') }) })
                    check = false
                }
            } else {
            var appendedInput = $('.appended')
            if (appendedInput != null) {
                handleFees(appendedInput, 'stuff')
                $(appendedInput).remove()
                check = true
            }
        }
    }
}

As stated above, I have tried making the textbox out of an input tag, but that does not appear. What appears with this case is Amount: $ @Html.TextboxFor(Function(a) a.appendAmount) exactly like that.

Any help or nudges in the right direction while I further attempt to debug the issue would be greatly appreciated.

Answers:

Answer

When you include the Javascript in the same vbhtml file the reason why it works is that the vbhtml file gets compiled before it is then sent out to the client's browser. Have a look at the javascript that is getting rendered either by viewing the source or using developer tools/or similar in your favourite browser.

When you ask javascript to write out

$('#appendHere').append('<li class="appended"><label>Amount: $</label></li>
<li class="appended">@Html.TextBoxFor(Function(a) a.appendAmount)</li>')

It will do just that.

Judging by your comments it seems as though you're already aware of this though :-) and that you're making progress.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.