MR.JOIS MR.JOIS - 9 months ago 48
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>
//when user clicks this button div is shown
<button class="cff-button" onclick="toggleCertificateInput('#{certificateInput.clientId}',true)">Add Certificate</button>
//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>


This is my javascript code:

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

inputDiv = document.getElementById(inputDivId);

alert("about to display input div"); = "block";
alert("about to hide input div"); = "none";


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

Answer Source

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: