单一表单中的primefaces手风琴面板-仅在打开的选项卡上验证 [英] primefaces accordion panel within single form - validation only on opened tab

问题描述

我已经检查过，但没有找到关于如何使用单一表格提交手风琴的明确示例.我发现的问题是当我只想处理(验证)打开的选项卡的字段时.

I have checked around but I didn't found a clear example on how to submit the accordion using a single form. The problem I find is when I want to process (validate) only fields of the opened tab.

我的页面结构如下:

<h:form>
    <p:accordionPanel activeIndex="#{bean.selectedTab}">
        <p:ajax event="tabChange" listener="#{bean.tabChangeListener}"/>

        <p:tab title="Tab1" id="t1">
            <p:inputText id="reqField1" required="true"/>
        </p:tab>
        <p:tab title="Tab2" id="t2">
            <p:inputText id="reqField2" required="true"/>
        </p:tab>
   </p:accordionPanel>

   <p:commandButton update="list" immediate="true" actionListener="#{bean.addRecord}"/>                     
</h:form>

方法:

@SessionScoped
public class Bean{
    public void tabChangeListener(AjaxBehaviorEvent evt){
        AccordionPanel panel = (AccordionPanel) evt.getComponent();
        // getLoadedTabs() returns an empty list
        String currentlyLoadedTabId = panel.getLoadedTabs().get(this.selectedTab).getClientId(); 

    }
}

无论如何要在 p:commandButton 标记中将当前打开的选项卡的 id 指定为进程属性的一部分吗?

Is there anyway to specify the id of the currently opened tab as part of the process attribute in p:commandButton tag?

更新当 Tab1 打开时，提交时，我只想验证 reqField1 而不是 reqField2.反之亦然，当 Tab2 打开时，我只想验证 reqField2 而不是 reqField1.

UPDATE When Tab1 is open, on submit, I want to be validated only reqField1 and not reqField2. Viceversa, when Tab2 is open, I want to be validated only reqField2 and not reqField1.

推荐答案

试试这个.

1. 将手风琴面板的 activeIndex 绑定到支持 bean 的 int 属性

1. Bind the activeIndex of the accordionPanel to a backing bean int attribute

activeIndex="#{myBean.selectedTab}"

使用绑定的activeIndex 获取当前选中标签的id.要在您的 actionListener 中执行此操作，请获取手风琴面板上的句柄

Get the id of the currently selected tab using the bound activeIndex. To do this in your actionListener, get a handle on the accordion panel

由于您的 actionListener 已设置为 immediate，activeIndex 和 selectedTab 将需要通过ajax更新.将以下 添加到您的手风琴面板

Since your actionListener has been set to immediate, the activeIndex and selectedTab will need to be updated via ajax. Add the following <p:ajax/> to your accordionPanel

<p:ajax event="tabChange" listener="#{bean.tabChangeListener}" />

在您的支持 bean 中，您现在将拥有

In your backing bean, you'll now have

public void (AjaxBehaviorEvent evt){
 AccordionPanel panel = (AccordionPanel) evt.getComponent();
 String currentlyLoadedTabId = panel.getLoadedTabs().get(this.selectedTab).getClientId(); 

}

使用从上面 2 中获得的 id，您可以将它包含在 JSF 列表中，这些内容将在服务器端使用 ajax 重新呈现.在同一个动作监听器方法中:

Using the the id you got from 2 above, you can include that in the JSF list of things to be rerendered using ajax on the server side. In the same action listener method:

 FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add(currentlyLoadedTabId);

或者，您可以考虑在每个选项卡中放置一个命令按钮，并在每个选项卡中放置一个表单.这样，每个命令按钮只处理它自己的父表单

Alternatively, you might just consider placing a command button in each of those tabs and having a form in each tab as well. This way, each command button processes only it's own parent form

这篇关于单一表单中的primefaces手风琴面板-仅在打开的选项卡上验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！