Question

I’d like to use toggle() (or hide()) from jquery, but it doesn’t work.

I know the syntax I use is not bad. It works on jsFiddle, but I’m unable to make it work with the razor view.

Here is the code I wanted to use :

    <script type="text/javascript">
        $(".hidden").toggle();
    </script>

@Using Html.BeginForm(IsPost)
@Html.ValidationSummary(True)
@<fieldset>
    <legend>contact</legend>
    <table>
        <tr>
        <td><h3>@Html.Raw("Données personnelles : ")</h3></td>
        </tr>

        <tr>
        <td>@Html.Raw("Nom : ")</td>
        <td>@Html.EditorFor(Function(model) model.nom)
        @Html.ValidationMessageFor(Function(model) model.nom)</td>

        <td>@Html.Raw("Prénom : ")</td>
        <td>@Html.EditorFor(Function(model) model.prenom)
        @Html.ValidationMessageFor(Function(model) model.prenom)</td>
        </tr>

        <tr>
        <td class="hidden">@Html.Raw("Date de naissance : ")</td>
        <td>@Html.EditorFor(Function(model) model.dateNaissance)
        @Html.ValidationMessageFor(Function(model) model.dateNaissance)</td>
        </tr>

    </table>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
End Using

The html code that is generated is the following :

 <tbody><tr>
        <td><h3>Données personnelles : </h3></td>
        </tr>

        <tr>
        <td>Nom : </td>
        <td><input class="text-box single-line" id="nom" name="nom" value="" type="text">
        <span class="field-validation-valid" data-valmsg-for="nom" data-valmsg-replace="true"></span></td>



        <td>Prénom : </td>
        <td><input class="text-box single-line" id="prenom" name="prenom" value="" type="text">
        <span class="field-validation-valid" data-valmsg-for="prenom" data-valmsg-replace="true"></span></td>
        </tr>

        <tr>
        <td class="hidden">Date de naissance : </td>
        <td><input class="text-box single-line" id="dateNaissance" name="dateNaissance" value="" type="text">
        <span class="field-validation-valid" data-valmsg-for="dateNaissance" data-valmsg-replace="true"></span></td>
        </tr>

And here are the CSS related to those spans :

        /* Styles for validation helpers
        -----------------------------------------------------------*/
        .field-validation-error {
            color: #ff0000;
        }

        .field-validation-valid {
            display: none;
        }

        .input-validation-error {
            border: 1px solid #ff0000;
            background-color: #ffeeee;
        }

        .validation-summary-errors {
            font-weight: bold;
            color: #ff0000;
        }

        .validation-summary-valid {
            display: none;
        }

        /* Styles for editor and display helpers
        ----------------------------------------------------------*/
        .display-label, 
        .editor-label {
            margin: 1em 0 0 0;
        }

        .display-field, 
        .editor-field {
            margin: 0.5em 0 0 0;
            position:relative;
            left:5px;
        }

        .text-box {
            width: 30em;
        }

        .multiline
        {
            height: 6.5em;
            position:relative;
            left:5px;
        }

        .tri-state {
            width: 6em;
        }
        .display-field
        {
            font-size:1.5em;
        }

What can I do to bypass all that stuff to make some parts of the page hidden?

Answer 1

If your code really is as quoted, the reason it works on jsfiddle and not in your code is that jsfiddle is including your script after the HTML, but your code is running the script before the elements exist in the DOM.

You have two choices:

1. Put your script at the end of the page, just before the closing </body> tag. I’d recommend this, as do the YUI team.

2. Use jQuery’s ready function (people frequently use the confusing shortcut for it, which is just passing a function into the jQuery function, which is usually aliased as $) to schedule your code to run on “DOM ready”.