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?

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

1 个答案: