Question

I added new tabs that contains input fields. However, for some reason, my managedbean could only store the values of the latest tab (Example tab 3) that was added. If I were to switch to an earlier tab (Example tab 2), and try to save the values, the stored value always reverts to the input field values of the last tab. There are absolutely no clear solutions on this from searching in the forums, both stackoverflow and primefaces forum. To reiterate, here is a detailed walkthrough:

1. TabView -> Add new tab (tab 1)
2. Save t1, f1, c1 under tab 1 (Success)
3. Add new tab (tab 2)
4. Add new tab (tab 3)
5. Save t3, f3, c3 under tab 3 (Success)
6. Select tab 2

7. Save t2, f2, c2 under tab 2 (Failed) -> Result: tab 2 values saved as tab 3 values (t3, f3, c3)

   <ui:composition template="/template/StakeholderTemplate.xhtml">
   
       <ui:define name="top">
           <h2>Customer Information Data Entry</h2>
       </ui:define>
   
       <ui:define name="contentInsert">
           <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
           <p:dialog modal="true" widgetVar="statusDialog" header="Status"   
                     draggable="false" closable="false" resizable="false">  
               <p:graphicImage value="/adminItem/images/ajaxloading.gif" /> 
           </p:dialog> 
   
           <h:form id="form">
   
               <p:growl showDetail="true" /> 
   
               <h:panelGrid columns="1">
   
                   <p:commandButton value="Add tab" process="@this" update="tw" actionListener="#{backMicroPortalMB.addTab}">
                   </p:commandButton>
                   <p:growl id="tabsave" showDetail="true" />
                   <p:tabView id="tw" style="width:100%" activeIndex="#{backMicroPortalMB.activeIndex}" value="#{backMicroPortalMB.unstructuredTabs}"  var="tab"  dynamic="true" cache="false">
                       <p:ajax event="tabChange" process=":form" listener="#{backMicroPortalMB.onTabChange}"/>
   
                       <p:tab title="#{tab.tabTitle}" closable="true">
   
                           <h:outputLabel for="tabTitle" value="Please key in tab title:" />
                           <h:inputText id="tabTitle" value="#{backMicroPortalMB.tab.tabTitle}"/>
                           <br/>
   
   
                           <h:outputLabel for="fieldTitle" value="Please key in field title:" />
                           <h:inputText id="fieldTitle" value="#{backMicroPortalMB.opt.fieldTitle}" /><br/>
   
                           <h:outputLabel for="contentTitle" value="Please key in content:" />
                           <p:editor id="contentTitle" value="#{backMicroPortalMB.opt.content}" width="600"/><br/>
   
                           <p:commandButton value="Save" update="@form" action="#{backMicroPortalMB.saveTab}" />
   
                       </p:tab>  
                   </p:tabView>
                   <p:commandButton id="panel" value="Add" action="#{backMicroPortalMB.createMicroPortal}"/>  
               </h:panelGrid>
           </h:form>
   
       </ui:define>
   
   </ui:composition>
   

Bean code:

@ManagedBean
@ViewScoped
public class BackMicroPortalMB {

public void addTab(ActionEvent action) {

        FacesContext ctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = ctx.getExternalContext();

        String url = "A tab";

        TabView tw = (TabView) ctx.getViewRoot().findComponent("form2:tw");
        TempTab tab = new TempTab();
        tab.setTabIndex(unstructuredTabs.size());
        tab.setTabTitle("new Tab");    
        unstructuredTabs.add(tab);

    }//add new Tab

public void onTabChange(TabChangeEvent event) {

        FacesContext ctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = ctx.getExternalContext();

        TempTab tab = this.unstructuredTabs.get(activeIndex);

        this.tab.setTabTitle(tab.getTabTitle());
        this.opt.setFieldTitle(tab.getOptField().iterator().next().getFieldTitle());
        this.opt.setContent(tab.getOptField().iterator().next().getContent());

        // FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab() + this.selectedIndex);  

        // FacesContext.getCurrentInstance().addMessage(null, msg);  
    }

public void saveTab() {

        FacesContext ctx = FacesContext.getCurrentInstance();
        Long stakeholderId = (Long) ctx.getExternalContext().getSessionMap().get("stakeholderId");        
        TempTab currentTab = this.unstructuredTabs.get(activeIndex);
        currentTab.setTabTitle(this.tab.getTabTitle());
        Collection<OptionalField> optFieldList = new ArrayList<OptionalField>();        
        optFieldList.add(this.opt);
        currentTab.setOptField(optFieldList);

        FacesMessage msg = new FacesMessage(tab.getTabTitle() + " Saved!");

        ctx.addMessage(null, msg);
    }//add new Tab   
}

I’ve searched at the PrimeFaces form and the only helpful reply I have got was to google viewscoped and tabview. However, what exactly is the issue here? I’m really new to PrimeFaces and JSF and would really appreciate advice.

PrimeFaces 3.3
JSF 2.1
Glassfish 3.1.2

Answer 1

You’re using a dynamic tabview with a collection of tabs as value and binding all input values of every tab to one and same bean property. During processing the inputs from all tabs, the input values of each tab would override each other in sequence until the last tab is reached and thus the bean ends up with only the values of the last tab.

You need to bind tab-specific properties to the model object specific to the tab itself, not to a managed bean property which is shared between all tabs. In your case, it’s the #{tab} object. So your <p:tab> content should ultimately end up as

<h:outputLabel for="tabTitle" value="Please key in tab title:" />
<h:inputText id="tabTitle" value="#{tab.tabTitle}"/>

<h:outputLabel for="fieldTitle" value="Please key in field title:" />
<h:inputText id="fieldTitle" value="#{tab.fieldTitle}" /><br/>

<h:outputLabel for="contentTitle" value="Please key in content:" />
<p:editor id="contentTitle" value="#{tab.content}" width="600"/><br/>