2013-05-16 6 views
6

Mam widok karty zawierający dwie zakładki.Główne widoki tabview: ustawianie aktywnego indeksu na zmianę tabulatora

Kiedy przełączam się z zakładki 1 na zakładkę 2, wywołuję kod, który wykonuje walidację i aktualizuje niektóre wartości. W zależności od wyniku tej weryfikacji, chciałbym pozostać na karcie 1 lub przejść do karty 2 i odświeżyć zawartość kart.

Moja TabView:

<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ój kod test, który simly zmienia wartości:

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

myślałem, że zmiany aktywnego indeksu kartę w moim sposobem byłoby mało, tak:

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

W przypadku zdarzenia tabChange metoda jest wywoływana, ale komponenty widoku TabView są przesyłane do klikniętej tabeli b, ignorując nową wartość.

Pomyślałem, że dodanie atrybutu aktualizacji do p:ajax spowodowałoby wyświetlenie całego widoku tabury, ale tylko karty i/lub zawartość kart zostanie ponownie wyświetlona.

I najdziwniejsza ze wszystkich, jeśli zmienię update=":form:tabview" do update=":form" lub update="@form", otrzymuję tylko jego zawartości Tab w odpowiedzi AJAX -> składnik znika ze strony!

Moja fasola jest viewscoped używam Primefaces 3.5, JSF 2.1 i Tomcat 7.

jakiś pomysł? Dzięki.

Odpowiedz

0

Staraj się, aby TabView w panelgrid ten sposób i jak aktualizować 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> 
+0

ja już próbowałem tego, ale to niczego nie zmienia. Tylko treść kart jest w odpowiedzi, dlatego kontener tabview "znika". – Virginie

9

Spróbuj wiązać swoją TabView na stronie serwera instancji składnika w swojej podkładowej fasoli.

1.Add TabView składnik przykład do podłoża fasoli

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

i coresponding getter nastawiacz

public TabView getTabview() { 
    return tabview; 
} 

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

2.Bind serwer przykład boczne do TabView

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

3 .Zmodyfikowanie metody doStuff():

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

Mam nadzieję, że uda się to.

+1

Wiele przebojów, ale działa to tylko wtedy, gdy W PEŁNI zaktualizujesz kartę. A wtedy lepiej nie używać bindowania użyj użycia 'tabIndex = # {yourbean.idx}' ' – Kukeltje

+0

Uwaga dla każdego czytającego powyższy komentarz, powinno to być: 'activeIndex =" # {myBean.tabIndex} "', nie 'tabIndex' – Addison

3

i łatwo naprawić z:

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

w currentdata mam SP_Index działce z liczbą karcie (pierwszy, drugi ....)

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

i dodać jQuery skrypt

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

Zaletą tego rozwiązania przy użyciu atrybutu activeIndex jest to, że tabView nie musi być aktualizowany w pełni – Kukeltje