javascript - 无法使用 javascript 显示 jsf 隐藏的 panelGroup

Question

我正在尝试在单击按钮时显示一个隐藏的 panelGroup(LAYOUT=BLOCK)。这是我的 jsf 代码:

 <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>

这是我的 JavaScript 代码:

//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";
        }

}

div 显示一秒钟然后隐藏。我正在使用ajax。有人可以告诉我为什么会发生这种情况吗？

Answer 1

您正在使用按钮的 onclick 属性来运行一些 JavaScript。但是，由于您的 onclick 处理程序不会返回 false，因此还会执行单击按钮(提交表单)的默认操作。要防止这种行为，只需将 return false 添加到您的处理程序即可。

另请参阅:

• What's the effect of adding 'return false' to a click event listener?