CODEWITHSUNDEEP
jsfrichfaces
Thomas Buckley
Thomas Buckley

Reputation: 6056

Richfaces 4 tabPanel actionListener not working on first call

I'm having trouble creating a working tabPanel in Richfaces 4 with JSF2.

Every time I select a Tab I can see the ajax request been sent, but it is NOT calling the actionListener method in my backing bean (I know this from running in Debug mode).

When I select the tab again, it will work (Again I am in debug mode and can see it going into the myBean.activateTab method).

TabPanelTest.xhtml

<h:form id="myFormTest">

    <rich:tabPanel id="myTabPanel" value="Tab1" activeItem="#{myBean.tabState.selectedTab}"
        switchType="ajax">

        <rich:tab id="Tab1" label="Tab 1" actionListener="#{myBean.activateTab}">

            <ui:include src="myTab.xhtml">
                <ui:param name="filterText" value="Tab 1" />
            </ui:include>

        </rich:tab>

        <rich:tab id="Tab2" label="Tab 2" actionListener="#{myBean.activateTab}">

            <ui:include src="myTab.xhtml">
                <ui:param name="filterText" value="Tab 2" />
            </ui:include>

        </rich:tab>
    </rich:tabPanel>
</h:form>


myBean.java

public void activateTab(ActionEvent ae)
{
    String componentId = ae.getComponent().getId();
}



Any help greatly appreciated.

Upvotes: 3

Views: 6704

Answers (1)

Thomas Buckley
Thomas Buckley

Reputation: 6056

Ok....I eventually found the solution myself!

I removed the actionListener from each rich:tab and instead used a a4j:ajax to listen for itemChanges

<h:form id="myFormTest">

              <rich:tabPanel id="myTabPanel" value="Tab1" activeItem="#{myBean.tabState.selectedTab}"
                        switchType="ajax">

                    <a4j:ajax event="itemchange" onerror="handleAjaxError" listener="#{myRequestsBean.activateTab}" render="myTabPanel" />

                        <rich:tab id="All" header="#{messages['test.allTab']}"  name="#{messages['test.allTab']}">

                                  <ui:include src="myTab.xhtml">
                                            <ui:param name="filterText" value="{messages['MyRequests.allFilter']}" />
                                  </ui:include>

                        </rich:tab>

                        <rich:tab id="Pending" header="#{messages['MyRequests.pendingTab']}" name="#{messages['MyRequests.pendingTab']}">

                                  <ui:include src="myTab.xhtml">
                                            <ui:param name="filterText" value="#{messages['MyRequests.pendingFilter']}" />
                                  </ui:include>

                        </rich:tab>
              </rich:tabPanel>
    </h:form>

Upvotes: 1

Related Questions