not able to show jsf hidden panelGroup using javascript

Question

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?

Try adding `return false`, so `onclick="toggleCertificateInput('#{certificateInput.clientId}',true);return false"` — Jasper de Vries, Nov 02 '16 at 13:48
Thankyou its working! can you please explain what happend when return false was added — MR.JOIS, Nov 02 '16 at 13:52

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

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.

not able to show jsf hidden panelGroup using javascript

1 Answers1