Ajax update changes active tab in a tabView

drasil · 19 Jul 2010, 11:47

Hello,

under specific circumstances (not always), active tab in a tabView is changed when the tabView is updated by <p:ajax>. To reproduce the issue, use the code below and follow these steps:

Switch to the second tab
Switch back to the first tab
Change the value in the select

As a result, the second tab becomes active.

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </h:head>

    <h:body>
        <h:form>
            <h:selectOneMenu>
                <f:selectItem itemLabel="Item 1" />
                <f:selectItem itemLabel="Item 2" />
                <p:ajax event="change" update="tabs" />
            </h:selectOneMenu>
        </h:form>

        <h:form id="mainForm" prependId="false">
            <p:tabView id="tabs" dynamic="true">
                
                <p:tab title="Tab 1">
                    <h:outputText value="Tab 1" />
                </p:tab>
                
                <p:tab title="Tab 2">
                    <h:outputText value="Tab 2" />
                </p:tab>
                
            </p:tabView>
        </h:form>
    </h:body>
</html>

Thank you for any reaction.

19 Jul 2010, 15:23

Not sure why that happens but more efficient way of selecting a tab is using client side api instead of updating the whole tabview with ajax, this will perform faster and avoid UI flickers.

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </h:head>

    <h:body>
        <h:form>
            <h:selectOneMenu onchange="tabs.selectTab(this.selectedIndex)">
                <f:selectItem itemLabel="Item 1" />
                <f:selectItem itemLabel="Item 2" />
            </h:selectOneMenu>
        </h:form>

        <h:form id="mainForm" prependId="false">
            <p:tabView id="tabs" dynamic="true" widgetVar="tabs">
                
                <p:tab title="Tab 1">
                    <h:outputText value="Tab 1" />
                </p:tab>
                
                <p:tab title="Tab 2">
                    <h:outputText value="Tab 2" />
                </p:tab>
                
            </p:tabView>
        </h:form>
    </h:body>
</html>

drasil · 19 Jul 2010, 15:39

Oh, sorry. I probably did not express myself well. My aim is not to select another tab by the selectOneMenu component. In fact, it is exactly the opposite - I want the active tab to remain the same and I am complaining about an unwanted change of an active tab by <p:ajax>. I am updating the tabView to reload the content of its tabs, not to change the active tab.

19 Jul 2010, 15:49

Ok, if you'd like to update the contents of tab then best practice is to place an outputPanel inside a tab and update that instead of the tabview widget.

Code: Select all

   <p:ajax event="change" update="tab1Content, tab2Content" />

 <p:tab title="Tab 1">
   <p:outputPanel id="tab1Content">
                    <h:outputText value="Tab 1" />
   </p:outputPanel>
  </p:tab>

drasil · 19 Jul 2010, 16:26

I was thinking about updating individual tabs instead of the whole tabView, but did not find a way to achieve it. Great help. Thank you very much!

benpad · 24 Jul 2010, 12:45

selectTab function not found.

24 Jul 2010, 13:00

Please create a new post for your own issue, thanks.

Ajax update changes active tab in a tabView

Who is online