使用 richfaces tabPanel 防止选项卡开关上的表单提交

Question

有一个选项卡面板，类似于：

<rich:tabPanel  >
    <rich:tab header="Description"  >
        <ui:include src="./tests/description.xhtml"/>                   
    </rich:tab>
    <rich:tab header="Something else">
        something else
    </rich:tab>
</rich:tabPanel>      

在description.xhtml中包含一些字段：

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:advanced="http://java.sun.com/jsf/composite/advanced">    

    <h:panelGroup id="description">        
        // ...
        <h:outputLabel  value="Name"/> 
        <h:inputText    id="name"
                        value="#{testTree.selected.name.text}" 
                        rendered="#{description.editing}"/>      
        // ...
        <advanced:button text="Reset" //Just a little upgraded a4j:commandButton
                         icon="images/clear.png"
                         action="#{description.resetEditing()}"
                         execute="@this"                                
                         render="description"
                         rendered="#{description.editing}"/>               
        <advanced:button text="Save"
                         icon="images/save2.png"
                         action="#{description.commitEditing()}"
                         execute="description" // #name and a few more fields                  
                         render="description"
                         rendered="#{description.editing}"/> 
    </h:panelGroup>
</ui:composition>

切换到第二个选项卡，我提交了“描述”表单，但这不好。我想重置所有字段。

如何使用 RichFaces 4 实现这一目标？

Answer 1

默认情况下，在选项卡之间切换时会提交父 tabPanel。您可以使用 tabPanel 的 switchType 属性将这种行为更改为 ajax 或 client。我可以想到两种方法来防止表单在从一个选项卡更改为另一个选项卡时提交：

1. 将 switchType 属性更改为客户端

2. 为每个选项卡包含一个表单< /p>

我看不到表单的定义位置，但我猜测整个 rich:tabPanel 都在表单内。我发现您的description.xhtml 页面中没有定义表单。您可以尝试删除现有的表单，然后为每个选项卡添加一个表单，即在description.xhtml 中：

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:advanced="http://java.sun.com/jsf/composite/advanced">    

<a4j:form>
<h:panelGroup id="description">        
    // ...
    <h:outputLabel  value="Name"/> 
    <h:inputText    id="name"
                    value="#{testTree.selected.name.text}" 
                    rendered="#{description.editing}"/>      
    // ...
    <advanced:button text="Reset" //Just a little upgraded a4j:commandButton
                     icon="images/clear.png"
                     action="#{description.resetEditing()}"
                     execute="@this"                                
                     render="description"
                     rendered="#{description.editing}"/>               
    <advanced:button text="Save"
                     icon="images/save2.png"
                     action="#{description.commitEditing()}"
                     execute="description" // #name and a few more fields                  
                     render="description"
                     rendered="#{description.editing}"/> 
</h:panelGroup>
</a4j:form>
</ui:composition>

我还将tabPanel 的switchType 属性设置为ajax，以便仅刷新tabPanel 的内容。

Answer 2

1) 将 switchType 属性更改为 client
2）为每个选项卡包含一个表格，

我花了 6 个小时谷歌搜索，最后在这里结束了对另一个选项卡的搜索，
更改此属性值救了我的命。