Question

in my jsp page i have two divs and a textbox with a default value as follows

<input type="text" value="somevalue"  id="box"/>
<div id="first" style="display:none"></div>

<div id="second"></div>

In script tag i have written as follows

<script>
$(document).ready(function()
{
    if($("#box").val()=='somevalue')
    {
        $('first').show();
        $('second').hide();
    }
});
</script>

The above code is running fine..but when the page loads the second div is coming for 1 second and then switching to first div..and i dont want that switching to appear..

Answer 1

You said it’s in a JSP page, so you can put conditional logic in on the server-side and determine which of the two <div> elements should be hidden before it even gets to the browser. There’s absolutely no reason to use jQuery to solve this, and doing so is (in my opinion) the wrong approach.

Assuming you’re using the JSTL core tag library:

<c:set var="yourValue" value="somevalue"/>
<input type="text" value="somevalue"  id="box"/>
<div id="first" <c:if test="${yourValue != 'somevalue'}">style="display:none"</c:if>></div>

<div id="second" <c:if test="${yourValue == 'somevalue'}">style="display:none"</c:if>></div>