MR.JOIS MR.JOIS - 1 month ago 9
Javascript Question

not able to show jsf hidden panelGroup using javascript

I am trying show a hidden panelGroup(LAYOUT=BLOCK) on a button click.This my jsf code:

<h:form id="userSetup" >
<h:inputText id="skills" a:placeholder="Skills" class="cff-inputText"></h:inputText>
<br/><br/>
//when user clicks this button div is shown
<button class="cff-button" onclick="toggleCertificateInput('#{certificateInput.clientId}',true)">Add Certificate</button>
<br/><br/>
//div to show on button click
<h:panelGroup id="certificate-input" layout="block" binding="#{certificateInput}" a:hidden="true">
<h:inputText value="#{uploader.certificateName}" class="cff-inputText" a:placeholder="Certificate Name"></h:inputText>
<h:inputText value="#{uploader.certificateLink}" class="cff-inputText" a:placeholder="Link"></h:inputText>
<h:commandButton value="Save Certificate" class="cff-button" action="#{uploader.saveCertificate()}">
<f:ajax execute="@form" ></f:ajax>
</h:commandButton>
</h:panelGroup>


</h:form>


This is my javascript code:

//if toggle is true then show the div else hide it
function toggleCertificateInput(inputDivId,toggle){

inputDiv = document.getElementById(inputDivId);

if(toggle){
alert("about to display input div");
inputDiv.style.display = "block";
}else{
alert("about to hide input div");
inputDiv.style.display = "none";
}

}


The div show for a second and then hidden. I am using ajax. Can someone please tell me why this is happening?

Answer

You are using the onclick attribute of a button to run some JavaScript. However, since your onclick handler does not return false, the default action of clicking a button (submitting a form) is also executed. To prevent this behavior, simply add return false to your handler.

See also:

Comments