0

I've got a textbox that I only want to show if the value of Model.SelectedSubProcessID is -2.

<script>
    $(function () {
        $('#subProcessAdditionalDiv').hide();
    });
</script>

<div id="modifyForm" class="incidentBox" style="justify-content: flex-start !important; width: auto !important; padding-left: 20px; text-align: left; align-items: flex-start !important;">

    ...

    if (Model.SelectedSubProcessID == -2)
    {
        <script type="text/javascript">
            $('#subProcessAdditionalDiv').show();
        </script>
    }

    ...

</div>
<br />

<div id="subProcessAdditionalDiv" style="display:flex; margin-bottom:10px">
    @Html.LabelFor(m => m.SelectedSubProcessName, new { style = "margin-top: 2px" })<span>&nbsp;&nbsp;</span>
    @Html.TextBoxFor(m => m.SelectedSubProcessName, new { style = "width:500px; margin-left: 120px" })<span>&nbsp</span>
    @Html.ValidationMessageFor(m => m.SelectedSubProcessName)
</div>

Even when the if statement is true the line $('#subProcessAdditionalDiv').show(); does not execute and the textbox remains hidden, why is this?

Improve this question
1
  • 1
    provide an example? jsfiddle? Commented Dec 14, 2017 at 15:51

1 Answer 1

Reset to default
5

You forgot to wrap the statement in the document's ready handler like you previously did above:

$(function () {
    $('#subProcessAdditionalDiv').show();
});

By not using the document's ready handler the code is trying to execute immediately as the browser is parsing the document, and the target element doesn't exist yet because it's later in the document. So the code is running in your example, the jQuery selector simply doesn't find any matching elements to show.

Note that putting two mutually exclusive statements into the document's ready handler might work, but just in case there's no guarantee about the order in which they're executed wouldn't it make more sense to wrap the condition around just one of the statements? Remove the top one (the call to .hide()) entirely and style the element to be hidden by default. Then your conditional call to .show() will show the element when it's needed. (Or style it to be shown by default and negate the condition to hide it.)

Additionally, you probably don't need to use JavaScript at all for this. Just wrap the element itself in the condition and it won't be sent to the client at all when the condition isn't met:

@if (Model.SelectedSubProcessID == -2)
    <div id="subProcessAdditionalDiv" style="display:flex; margin-bottom:10px">
        ...
    </div>
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That did it, the reason I'm using javascript is because I also want the box to hide/show depending on what the user selects from a dropdown menu

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.