3

I have an accordion with a dynamic number of tabs. The tab title gets set to a CSS class. This makes the background ether green or red, depending on if all the articles in the order are delivered.

For every article there is a selectBooleanButton and on every change of these buttons the actual tab should get updated.

The problem is: how can I update just one tab? When I update the whole accordion the first tab opens and the other get closed.

<p:accordionPanel id="ordersAccordion" cache="true" value="#{ordersBean.orders}" var="order">
        <p:tab
            titleStyleClass="#{ordersBean.isOrderDelivered(order) ? 'ui-accordion-tab-delivered' : 'ui-accordion-tab-undelivered'}"
            title="##{order.order_id} | #{order.printableOrderDate}  | #{order.printableOrderTime} | #{order.user} | #{order.getDestination().toString()}">
            <p:dataTable value="#{order.demands}" var="demand">
                <p:column headerText="Artikel Nr.">
                    <p:outputLabel value="#{demand.article.articleNumber}" />
                </p:column>
                <p:column headerText="Name">
                    <p:outputLabel value="#{demand.article.name}" />
                </p:column>
                <p:column headerText="Beschreibung">
                    <p:outputLabel value="#{demand.article.description}" />
                </p:column>
                <p:column headerText="Haus">
                    <p:outputLabel value="#{demand.house.getLabel()}" />
                </p:column>
                <p:column headerText="Anzahl">
                    <p:outputLabel value="#{demand.quantity}" />
                </p:column>
                <p:column headerText="Mitarbeiter">
                    <p:outputLabel value="#{demand.employee}" />
                </p:column>
                <p:column headerText="Lieferstand" width="150" style="text-align: center">
                    <p:selectBooleanButton id="deliverdBtn" value="#{demand.delivered}" onLabel="Geliefert" offLabel="Geliefert" onIcon="ui-icon-check"
                        offIcon="ui-icon-close">
                        <p:ajax listener="#{ordersBean.saveDelivered(demand)}" update=":allOrders:ordersAccordion" />
                    </p:selectBooleanButton>
                </p:column>
            </p:dataTable>
        </p:tab>
</p:accordionPanel>
Andrew Morton
  • 24,203
  • 9
  • 60
  • 84
L3p0
  • 95
  • 1
  • 3
  • 8
  • dealing with the same problem here: http://stackoverflow.com/questions/31460044/how-to-ajax-update-components-in-single-tab-of-paccordionpanel-from-outside – amphibient Jul 16 '15 at 16:48

1 Answers1

1

The AccordionPanel has an activeIndex attribute which you can use to work on the current tab. You should be able to do something like this:

<p:ajax listener="#{ordersBean.saveDelivered(demand)}" update=":allOrder:ordersAccordion:tab#{ordersAccordion.activeIndex}" />
Emil Kaminski
  • 1,886
  • 2
  • 16
  • 26
  • if tab is not active(when all tabs inactive),gives error..So this solution is not enough – erginduran Mar 23 '15 at 12:19
  • This answer was given in a case where the ajax element was inside the tab, which means the tab must have been active/open. It is not a solution for updating the tabs from outside – Emil Kaminski Jul 17 '15 at 12:29