a4j:commandButton onbegin 表单加载时触发事件

Question

我在使用 a4j:commandButton 时遇到问题。我想要完成的是：

我有一个带有提交和取消按钮的表单。当用户单击提交按钮时，我希望禁用这两个按钮，并弹出一个要求用户确认的弹出窗口。一旦用户确认，如果存在验证错误，我希望重新启用提交和取消按钮。我尝试了很多解决方案，但似乎没有一个有效。如果您有比以下更好的解决方案，请发布。我的问题与下面的代码有关

                        <h:panelGrid id="submitPanel" columns="2">
                        <a4j:commandButton id="addRequestButton" render="addRequestButton,cancelButton" onbegin="#{addRequestBean.disableSubmitButton()}" styleClass="LoginButtonStyle" value="Submit" 
                                            disabled="#{addRequestBean.submitEnabled}" oncomplete="#{addRequestBean.enableSubmitButton()}"> 
                            <rich:componentControl target="popup" operation="show" />
                        </a4j:commandButton>
                        <h:commandButton  id="cancelButton" styleClass="LoginButtonStyle" value="Cancel" action="main" disabled="#{addRequestBean.submitEnabled}"> 
                        </h:commandButton>
                    </h:panelGrid>
                    <rich:popupPanel id="popup" modal="true" autosized="true" resizeable="false">
                        <f:facet name="header">
                            <h:outputText value="Verify"></h:outputText>
                        </f:facet>
                        <h:panelGrid id="popupgrid" columns="1">
                            <h:outputText styleClass="labelFontStyle" escape="false" value="All changes are final. &lt;br /&gt;Do you wish to continue?"></h:outputText>
                            <h:outputLabel styleClass="labelFontStyle" value="" for="">  
                            </h:outputLabel>
                        </h:panelGrid>
                        <h:panelGrid columns="2">
                            <h:commandButton  styleClass="LoginButtonStyle" value="Ok"  action="#{addRequestBean.saveRequest}"  onclick="#{rich:component('popup')}.hide()"> 
                            </h:commandButton>
                            <h:commandButton  styleClass="LoginButtonStyle" value="Cancel" onclick="#{rich:component('popup')}.hide()"> 
                            </h:commandButton>
                        </h:panelGrid>
                    </rich:popupPanel>

ViewScoped Bean。

我希望 onbegin 事件将支持 bean 变量设置为禁用，并使用 oncomplete 方法重新启用它。麻烦是在表单加载时触发 onbegin 事件，因此禁用了提交和取消按钮。一定是我做错了什么，如果没有，是否有解决方法？如果有比这更好的解决方案，请再次发布。

谢谢

Answer 1

虽然我认为在显示模式弹出窗口后不需要禁用这两个按钮（根据定义，模式弹出窗口意味着在关闭弹出窗口或刷新页面之前，该页面上无法执行其他操作），并且您还没有说明您是否希望默认禁用提交按钮（这就是您的代码所指示的），您可以通过

实现它

1. 将两个按钮包装在 <a4j:outputPanel/> 中。这样，两个按钮都会被该页面上的任何 ajax 操作重新呈现。还有action="main" 在取消按钮上做什么？这将不工作。此外，您选择 <h:commandButton/> 意味着它不会触发 ajax 请求来更新视图中的任何内容

   <a4j:outputPanel ajaxRendered="true" layout="block">
   <a4j:commandButton id="addRequestButton" styleClass="LoginButtonStyle" action = "#{addRequestBean.toggleSubmitButtonState}"  value="Submit" disabled="#{addRequestBean.submitEnabled}" oncomplete="#{rich:component('popup')}.show()"/> 
   <h:commandButton id="cancelButton" styleClass="LoginButtonStyle" value="Cancel" action="main" disabled="#{addRequestBean.submitEnabled}"/> 
   </a4j:outputPanel>
   

2. 为您的按钮添加一个切换按钮状态的方法表达式

     public void toggleSubmitButtonState(){
       this.submitEnabled = !submitEnabled;     
   
     }
   

   你真的不应该将两个按钮的状态绑定到同一个布尔值，因为从语义上讲，它们在做不同的事情，但我会坚持你已经在这里拥有的东西

3. 我建议您将该弹出窗口从它当前与所有其他组件共享的表单中删除，但同样，让我们​​使用您所拥有的。同样，您在此处单独选择 <h:commandButton/> 将确保您没有执行任何 ajax。添加<f:ajax/> 或将这些按钮转换为<a4j:commandButton/>

     <h:commandButton  styleClass="LoginButtonStyle" value="Ok"  action="#{addRequestBean.saveRequest}"  oncomplete="#{rich:component('popup')}.hide()"/>
     <h:commandButton  styleClass="LoginButtonStyle" value="Cancel" onclick="#{rich:component('popup')}.hide()"/> <!-- This won't work as is, it will refresh the entire page instead of just firing the javascript event. Change to a4j-->
   

4. 将<f:event/> 事件处理程序添加到该页面以检查验证失败。

   在您的支持 bean 中，我们添加了检查验证失败的方法

   public void checkValidationFailures(){
   
   FacesContext context = FacesContext.getCurrentInstance();
   if (context.isPostback() && context.isValidationFailed()){ //if the request is a postback and validation failed
   
      this.submitEnabled = true;             
   
     }
   }
   

   只有在 saveRequest 方法中抛出 ValidatorException 时，这才有效。否则，您将不得不在方法中自己处理故障并将submitEnabled 值显式设置为true，然后重新渲染按钮。这就是为什么您可能应该将弹出窗口中的这些按钮转换为a4j。