Chế độ xem tab Primefaces: đặt chỉ mục hoạt động trên tab thay đổi

Question

Tôi đã có chế độ xem tab có chứa hai tab.

Khi tôi chuyển từ tab 1 sang tab 2, tôi đang gọi một số mã thực thi xác thực và cập nhật một số giá trị. Tùy thuộc vào kết quả của việc xác thực này, tôi muốn ở lại trên tab 1 hoặc chuyển đến tab 2 và làm mới nội dung của các tab.

TabView của tôi:

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

mã kiểm tra của tôi mà simly thay đổi các giá trị:

public void doStuff() { 
    s1 = String.valueOf(Math.random()); 
    s2 = String.valueOf(Math.random()); 
} 

Tôi nghĩ rằng việc thay đổi chỉ số tab tích cực trong phương pháp của tôi sẽ là đủ, như vậy:

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

Trên tabThay đổi sự kiện, phương thức được gọi nhưng các thành phần tabview được chuyển đến công cụ được nhấp b, bỏ qua giá trị mới idx.

Tôi nghĩ việc thêm thuộc tính cập nhật vào p:ajax sẽ hiển thị toàn bộ tabview nhưng chỉ các tab và/hoặc nội dung của tab được hiển thị lại.

Và lạ nhất, nếu tôi thay đổi update=":form:tabview" thành update=":form" hoặc update="@form", tôi chỉ nhận được nội dung của tab trong phản hồi ajax -> thành phần biến mất khỏi trang!

Đậu của tôi được xem, tôi đang sử dụng Primefaces 3.5, JSF 2.1 và Tomcat 7.

Bất kỳ ý tưởng nào? Cảm ơn.

Answer 1

Cố gắng giữ TabView của bạn trong panelgrid như cách này và cập nhật này 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> 

Answer 2

Cố gắng để ràng buộc TabView bạn đến máy chủ bên dụ thành phần trong đậu ủng hộ của bạn.

1.Add TabView thành phần ví dụ để đậu bạn ủng hộ

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

và coresponding getter và setter

public TabView getTabview() { 
    return tabview; 
} 

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

2.Bind phía máy chủ ví dụ để TabView bạn

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

3 .Xác minh phương thức doStuff() của bạn

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

Và hy vọng sẽ thực hiện thủ thuật.

Answer 3

tôi dễ dàng sửa lỗi này với:

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

trong currentdata tôi có SP_Index tài sản với số lượng tab (nhất, nhì ....)

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

và thêm jquery kịch bản

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