Question

EDIT

I am editing this as it appears the many are focosing on the html formatting instead of the question. My apologies

Yes of course the div tag is sitting inside a table and yes of course the hiding of the tag in jquery is called once the DOM has been loaded

---

The Jquery is as follows;

$(document).ready(function() {

    //naturally there is more in this file but this is all that happens to this tag
   $("#assessmentStatusReason").children().hide();
}

The HTML is as follows;

<table>

        <tr><td class="fieldLabelBold"><label>CRN:</label></td>
        <td class="fieldText" id="uxCRN"></td></tr>

        <tr><td class="fieldLabelBold">
                <label>
                    Jobseeker Id:</label>
            </td>
            <td class="fieldText" id="uxJobseekerId">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Name:</label>
            </td>
            <td class="fieldText" id="uxName">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Date Of Birth:</label>
            </td>
            <td class="fieldText" id="uxDateOfBirth">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Gender:</label>
            </td>
            <td class="fieldText" id="uxGender">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Phone:</label>
            </td>
            <td class="fieldText" id="uxPhone">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Mobile:</label>
            </td>
            <td class="fieldText" id="uxMobile">
            </td>
        </tr>

        <div>
        <h3>Addresses</h3>
        </div>

        <tr>
            <td class="fieldLabelBold">
                <label>
                    Residential Address:</label>
            </td>
            <td class="fieldText" id="uxResidentialAddress">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Postal Address:</label>
            </td>
            <td class="fieldText" id="uxPostalAddress">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Interpreter Required:</label>
            </td>
            <td class="fieldText" id="uxInterpreterRequired">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Language:</label>
            </td>
            <td class="fieldText" id="uxLanguage">
            </td>
        </tr>

        <tr>
            <td class="fieldLabelBold ">
                <label>
                    Assessment Status:</label>
            </td>
            <td width="300px">                
                !{Html.DropDownList("assessmentDecision", Model.ReferralStatus, new { id = "uxassessmentDecision" })}
            </td>
        </tr>
        <div id="assessmentStatusReason">
        <tr id="uxNoShowDate">
            <td class="fieldLabelBold"><label>No Show Date:</label></td>
            <td>!{Html.DatePicker("uxNoShowDate", null, true, "100px")}</td>
        </tr>        

        <tr id="uxReferralDeclinedReasonCode" >
            <td class="fieldLabelBold"><label>Declined Reason:</label></td>
            <td>!{Html.DropDownList("DeclinedReason", Model.ReferralDeclinedReasonCode, new { id = "uxDeclineReasonCode" })}</td>
        </tr>       
        </div>
        </table>

Hi,

This is such as basic and I’ve seen the other posts on this kind of question but the answer strangely enough does not seem to work.

I have a div tag

<div id="assessmentStatusReason">
        <tr>
            <td class="fieldLabelBold"><label>Reason:</label></td>
            <td class="fieldText" id="uxLanguage"><input id="reasonInput2" /></td>
        </tr>
        </div>

and on the loading of the jquery I run

$("#assessmentStatusReason").children().hide();

but the tr td and input are still visible on loading

any ideas?

Answer 1

I would suggest making your assessmentStatusReason a class instead of an ID, this way you can hide multiple rows.

<tr class="assessmentStatusReason">
 <td class="fieldLabelBold"><label>Reason:</label></td>
 <td class="fieldText"><input id="reasonInput1" /></td>
</tr>
<tr class="assessmentStatusReason">
 <td class="fieldLabelBold"><label>Reason:</label></td>
 <td class="fieldText"><input id="reasonInput2" /></td>
</tr>

Then use this script:

$(document).ready(function() {
    $(".assessmentStatusReason").hide();
});