单一表单中的 primefaces 手风琴面板 - 仅在打开的选项卡上验证

2024-07-03

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

我的页面结构如下:

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

method:

@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(); 

    }
}

无论如何,是否可以将当前打开的选项卡的 id 指定为 p:commandButton 标记中 process 属性的一部分?

UPDATE


尝试这个。

  1. 绑定activeIndex的 AccordionPanel 到支持 bean int 属性

    activeIndex="#{myBean.selectedTab}"
    
  2. Get the id使用绑定当前选定的选项卡activeIndex。要在您的actionListener,获取手风琴面板上的句柄

    编辑:自从你actionListener已设置为immediate, the activeIndex and selectedTab需要通过ajax更新。添加以下内容<p:ajax/>到你的手风琴面板

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

    在你的支持 bean 中,你现在将拥有

    public void (AjaxBehaviorEvent evt){
     AccordionPanel panel = (AccordionPanel) evt.getComponent();
     String currentlyLoadedTabId = panel.getLoadedTabs().get(this.selectedTab).getClientId(); 
    
    }
    
  3. 使用id根据上面 2 中的内容,您可以将其包含在要在服务器端使用 ajax 重新呈现的 JSF 列表中。在相同的操作侦听器方法中:

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

或者,您可能只考虑在每个选项卡中放置一个命令按钮,并在每个选项卡中也有一个表单。这样,每个命令按钮仅处理它自己的父窗体

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单一表单中的 primefaces 手风琴面板 - 仅在打开的选项卡上验证 的相关文章

随机推荐