Question

The following is the javascript code:

<script language="JavaScript">
    function ShowHide(divId)
    {
        if(document.getElementById(divId).style.display == 'none')
        {
            document.getElementById(divId).style.display='block';
        }
    }
</script>

This is the xhtml code to call the showhide function:

<p:column>
<p:commandLink onclick="javascript:ShowHide('HiddenDiv');" ajax="false" value="#{rail.trainNo}" action="#yardMaster.populateTrainDetails(rail.trainNo)}" style="font-family:Times New Roman, Times, serif;"></p:commandLink>
</p:column>

The above is the link which is supposed to unhide the following division:

<div style="display: none" id="HiddenDiv">
 Stuff
</div>

basically I’m trying to unhide a table in the div tag which is not displayed when the webpage is rendered for the first time. This is only half working, in the sense that when I click on the link it appears for a second or so and disappears immediately. What am I doing wrong??

Answer 1

Remove ajax="false". You don’t need to refresh the entire page just the given div. In your case when you click on the p:commandLink the div will be displayed but since ajax="false" the whole page is refreshed – which will display your div in its initial state.