primefaces accordionPanal dynamic disable tab

Question

I have 2 tab in accordionPanel (tab1 and tab2), tab2 is disabled by default, and tab activeIndex is -1 by default.
I want the tab2 be enable if i check on the checkbox in tab1.
I tried by update the whole accordionPanel(bbb), but the tab1 will collapse as default.

method1:

xhtml:

<h:form id="aaa">
    <p:accordionPanel id="bbb" activeIndex="#{beanPage.testdd}" widgetVar="accordionPanelWidget">  
        <p:tab id="tab1">
            <f:facet name="title">
                <h:panelGroup columns="2">
                    <h:selectBooleanCheckbox id="chkBox1" value="#{beanPage.testbb}">
                        <p:ajax global="false" event="click" update=":aaa:bbb:chkBox1,:aaa:bbb" listener="#{beanPage.testcc}" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="tab1" />               
                </h:panelGroup>         
            </f:facet>
            <h:outputText value="tab1" />
        </p:tab>
        <p:tab id="tab2" disabled="#{appealPage.testaa}">
            <f:facet name="title">
                <h:panelGroup columns="2">
                    <h:selectBooleanCheckbox id="chkBox2" value="#{appealPage.testee}">
                        <p:ajax global="false" event="click" update=":aaa:bbb:chkBox2" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="tab2" />               
                </h:panelGroup>         
            </f:facet>
            <h:outputText value="tab2" />
        </p:tab>
    </p:accordionPanel>
</h:form>

beanPage:

public void init() {
    setTestaa(true);
    setTestbb(false);
    setTestee(false);
    setTestdd(-1);
}

public void testcc() {
    boolean result = isTestbb();
    if (result) {
        setTestaa(false);
    } else {
        setTestaa(true);
    }
}

score 0 · Answer 1 · answered Mar 07 '14 at 12:28

Try this. I removed the panelGroups. This is what you need?

XHTML CODE

<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
       xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
    <style>


    </style>
    </h:head>

    <h:body>
<h:form id="aaa">
    <p:accordionPanel id="bbb" activeIndex="#{beanPage.testdd}" widgetVar="accordionPanelWidget">  
        <p:tab id="tab1" title="LA primera">
        <f:facet name="title">
                    <h:selectBooleanCheckbox id="chkBox1" value="#{beanPage.testbb}">
                        <p:ajax global="false" event="click" update=":aaa:bbb:chkBox1,:aaa:bbb" listener="#{beanPage.testcc}" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="tab1" />               
            <h:outputText value="tab1" />
            </f:facet>
        </p:tab>
        <p:tab id="tab2" disabled="#{beanPage.testaa}">
        <f:facet name="title">
                    <h:selectBooleanCheckbox id="chkBox2" value="#{beanPage.testee}">
                        <p:ajax global="false" event="click" update=":aaa:bbb:chkBox2" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="tab2" />               
            <h:outputText value="tab2" />
            </f:facet>
        </p:tab>
    </p:accordionPanel>
</h:form>
    </h:body>
</html>

JAVA CODE

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name="beanPage")
@ViewScoped 
public class BeanPage {

    public boolean testaa;
    public boolean testbb;
    public boolean testee;
    public int testdd;

    public  BeanPage() {
        System.out.println("1");
        setTestaa(true);
        setTestbb(false);
        setTestee(false);
        setTestdd(-1);
    }

    public void testcc() {
        boolean result = isTestbb();
        if (result) {
            setTestaa(false);
        } else {
            setTestaa(true);
        }
    }

    public boolean isTestaa() {
        return testaa;
    }
    public void setTestaa(boolean testaa) {
        this.testaa = testaa;
    }
    public boolean isTestbb() {
        return testbb;
    }
    public void setTestbb(boolean testbb) {
        this.testbb = testbb;
    }
    public boolean isTestee() {
        return testee;
    }
    public void setTestee(boolean testee) {
        this.testee = testee;
    }
    public int getTestdd() {
        return testdd;
    }
    public void setTestdd(int testdd) {
        this.testdd = testdd;
    }



}

hi @Rafa Hernández, i tried remove the panelGroups, but the tab1 still collapse when i click the checkbox in tab1. — heng heng, Mar 11 '14 at 03:14
hi @hengheng the consstuctor BeanPage have a System.out.println("1") You see the message in the console? — Rafa Hernández, Mar 11 '14 at 07:24
@hengheng notice that I changed the init function for the constructor BeanPage — Rafa Hernández, Mar 11 '14 at 07:29
hi @Rafa Hernández, yup I can see the "1" in console when i open the page. It won't display after i click the check box. — heng heng, Mar 11 '14 at 09:54

primefaces accordionPanal dynamic disable tab

1 Answers1