Problems with <p:accordionPanel>

[DKroot]

I have somewhat bizarre problems with <p:accordionPanel>. I used it in my POC app as a left navigator with the body of the pages rendering a wizard UI with Next>>/<<Previous buttons. The accordion has 3 tabs displaying 3 sections and the list of steps within each section.
The first problem is that the accordion does not "go" correctly from one section to another based on dynamic activeIndex. What weird about that is if I refresh the page, usually by hitting app's home page that redirects to the current wizard step, the accordion corrects itself. It happens with both AJAX and non-AJAX POSTs. I used <h:commandButton>-s initially, and then - migrated to <p:commandButton> with no change in accordion's behavior.

The second problem is that it occasionally loses styling when I go from one step to another. For this one, I don't know the exact conditions yet.

[Oleg]

Hi,

My accordion panel occasionally loses styling as well (after partial update). But I found out that this behavior was caused by brocken HTML. Maybe you have JavaScript errors and the markup could be not rendered correct. For instance (my case): you have declared widgetVar="ABC", but used later the name XYZ.

[cagatay.civici]

How do you set the dynamic activeIndex? AccordionPanel keeps it's state across requests to display the current active tab even after a postback.

[DKroot]

I set dynamic activeIndex based on model state set by other actions. That is, here is the template that I have (simplified):

Code: Select all

  <!-- Active section: #{app.section} (#{app.section.value}) -->
  <h:panelGrid columns="2" rowClasses="vertical-align-top">
    <p:accordionPanel id="leftNavigator" activeIndex="#{app.section.value}"
        styleClass="panel_menu">
      <p:tab title="1 Info About You" id="section1">
      <!-- Contents skipped -->
      </p:tab>

      <p:tab title="2 Your Dependency Status" id="section2">
      <!-- Contents skipped -->
      </p:tab>

      <p:tab title="3 Your Parents" id="section3">
     <!-- Contents skipped -->
      </p:tab>
    </p:accordionPanel>

    <p:panel id="wizardPanel" styleClass="wizard">
      <f:facet name="header">
        <h:outputText value="#{app.step.fullTitle}"/>
      </f:facet>

      <h:panelGrid rowClasses="s1row" columns="2" columnClasses="wfcol1,wfcol2">

        <ui:insert name="data">Data</ui:insert>

      </h:panelGrid>

      <div class="navPanel">

        <p:commandButton value="<<Previous" rendered="#{not app.step.firstStep}"
            action="#{app.onPrevStep}" update="wizardPanel,leftNavigator,messages"
            style="float:left" />

        <p:commandButton value="Next >>" rendered="#{not app.step.lastStep}"
            action="#{app.onNextStep}" update="wizardPanel,leftNavigator,messages"
            style="float:right" />

      </div>

      <br/> <!-- Add some white space at the panel bottom -->
    </p:panel>
  </h:panelGrid>

My Previous/Next button would move through steps and sections of the form. The current step and section persists.
If I uncomment #{app.section.value}, it shows a correct value, say 1 for the second tab, but <p:accordionPanel> seems to ignore it.

[DKroot]

I also want to mention the third problem. On the same page, there are 2 regular <h:commandButton>-s at the top. When I move to another wizard step, both buttons do not work the first time I click on them. Based on logs, no action handlers get invoked. The second time I click on them - they work. They also work if i don't move to another wizard step.
Not sure if it's a related problem.