Ajax Primefaces选项卡视图：在选项卡更改时设置活动索引

我有一个包含两个选项卡的选项卡视图

当我从选项卡1切换到选项卡2时，我调用了一些代码来执行验证并更新一些值。根据此验证的结果，我希望停留在选项卡1上，或转到选项卡2，刷新选项卡的内容

我的选项卡视图：

<h:form id="form"> 
    <p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false">  
        <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:tabview"/>
        <p:tab title="Tab 1" id="t1">  
            <h:panelGrid columns="1" cellpadding="10">
                <h:outputText value="#{ctrl.s1}"/>
            </h:panelGrid>  
        </p:tab>  
        <p:tab title="Tab 2" id="t2">  
            <h:panelGrid columns="1" cellpadding="10">
                <h:outputText value="#{ctrl.s2}"/>
            </h:panelGrid>  
        </p:tab>
    </p:tabView>  
</h:form>

我认为在我的方法中更改活动选项卡索引就足够了，如下所示：

public void doStuff() {
    // ...
    idx = 0;
}

在tabChange事件中，调用该方法，但tabview组件转到单击的选项卡，忽略

idx

新值

我认为在

p:ajax

中添加一个update属性会呈现整个tabview，但只会重新呈现选项卡和/或选项卡的内容

最奇怪的是，如果我将

update=“：form:tabview”

更改为

update=“：form”

或

update=“@form”

，我只会在ajax响应中收到选项卡的内容->组件从页面中消失

我的bean是ViewScope的，我使用的是PrimeFaces3.5、JSF2.1和Tomcat7

---

有什么想法吗？谢谢。

尝试以这种方式将您的选项卡视图保存在panelgrid中，并更新此

h:panelgrid

h:panelGrid id="mainPanel">

<p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false">  
        <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:mainPanel"/>
        <p:tab title="Tab 1" id="t1">  
            <h:panelGrid columns="1" cellpadding="10">
                <h:outputText value="#{ctrl.s1}"/>
            </h:panelGrid>  
        </p:tab>  
        <p:tab title="Tab 2" id="t2">  
            <h:panelGrid columns="1" cellpadding="10">
                <h:outputText value="#{ctrl.s2}"/>
            </h:panelGrid>  
        </p:tab>
    </p:tabView>


</h:panelGrid>

h:panelGrid=“mainPanel”>

尝试将TabView绑定到支持bean中的服务器端组件实例

1.将TabView组件实例添加到支持bean中

org.primefaces.component.tabview.TabView tabview=null;

以及相应的吸气剂和setter

public TabView getTabview() {
    return tabview;
}

public void setTabview(TabView tabview) {
    this.tabview = tabview;
}

2.将服务器端实例绑定到TabView

<p:tabView id="tabview" binding=#{yourBean.tabview} dynamic="true" cache="false">
...
</p:tabView>

希望它能做到这一点。

我可以通过以下方法轻松解决此问题：

  public void onSPTabChange(TabChangeEvent event) 
  {   
  TabView tabView = (TabView) event.getComponent();
  currentData.setSP_Index(tabView.getChildren().indexOf(event.getTab())+1);
  }

在currentdata中，我有属性SP_索引和选项卡编号（第一，第二…）

....

并添加jquery脚本

<script>
  $("#tabView li:nth-child(#{currentData.SP_Index})").click();
</script>

$（“#tabView li:n子项（#{currentData.SP_Index}）”）。单击（）；

我已经试过了，但没有任何改变。只有选项卡的内容在响应中，因此选项卡视图容器“消失”。许多更新投票，但这只有在完全更新选项卡时才起作用。然后最好不要使用绑定，而是使用

tabIndex={yourbean.idx}

“注意：对于任何阅读上述评论的人来说，它应该是：

activeIndex=“{myBean.tabIndex}”

，而不是

tabIndex

。与使用activeIndex属性相比，此解决方案的优点是不需要完全更新tabView

  public void onSPTabChange(TabChangeEvent event) 
  {   
  TabView tabView = (TabView) event.getComponent();
  currentData.setSP_Index(tabView.getChildren().indexOf(event.getTab())+1);
  }

 <p:tabView id="tabView" styleClass="tabView">  
 <p:ajax event="tabChange" listener="#{dataAccess.onSPTabChange}" />
 ....

<script>
  $("#tabView li:nth-child(#{currentData.SP_Index})").click();
</script>