HTML - DIV 没有隐藏

Question

I have a project based in Spring Web model-view-controller (MVC) framework. The version of the Spring Web model-view-controller (MVC) framework is 3.2.8 I have this piece of code in my JSP

  <div class="col-md-12" id="secondSignatoryDivId" >                                                    
    <table width="100%">
        <thead>
            <tr>
                <th><b>First name</b></th>
                <th><b>Last name</b></th>
                <th><b>Position</b></th>
                <th><b>Title</b></th>
                <th><b>Actions</b></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" value="${deviceForm.device.secondSignatory.firstname}" <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
                <td><input type="text" value="${deviceForm.device.secondSignatory.lastname}"  <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
                <td><input type="text" value="${deviceForm.device.secondSignatory.position}"  <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
                <td><input type="text" value="${deviceForm.device.secondSignatory.title}"     <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>                                                               
                <td>Delete</td>                                                     
            </tr>
        </tbody>
    </table>
</div>

<c:if test="${empty applicationForm.application.secondSignatory}">
    <script>
    alert ('lalalal');
    $('#secondSignatoryDivId').hide();
    </script>
</c:if> 

I see the alert but the div does not hide !

Answer 1

You are using jQuery, you should include jQuery on your html file:

 alert('lalalal'); $('#secondSignatoryDivId').hide();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-12" id="secondSignatoryDivId"> <table width="100%"> <thead> <tr> <th><b>First name</b> </th> <th><b>Last name</b> </th> <th><b>Position</b> </th> <th><b>Title</b> </th> <th><b>Actions</b> </th> </tr> </thead> <tbody> <tr> <td> <input type="text" value="${deviceForm.device.secondSignatory.firstname}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td> <td> <input type="text" value="${deviceForm.device.secondSignatory.lastname}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td> <td> <input type="text" value="${deviceForm.device.secondSignatory.position}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td> <td> <input type="text" value="${deviceForm.device.secondSignatory.title}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td> <td>Delete</td> </tr> </tbody> </table> </div>

Answer 2

If it is just for hiding the element then better to do it with css :

<c:if test="${empty applicationForm.application.secondSignatory}">
    <style>
       #secondSignatoryDivId.col-md-12 { display:none; }
    </style>
</c:if>