CODEWITHSUNDEEP
primefacestabstabview
Kanika Prime
Kanika Prime

Reputation: 105

PrimeFaces Tabview Tab change not working

I have simple flow of 3 tabs. I have tested the Simple tabview example on showcase. But When I change the first tab with my content, I can't switch to other tabs.

Kindly guide me with what is wrong that needs to be changed. Earlier I was using Wizard but I had the same tab change problem there as clicking on next was taking me to the last tab everytime. and Now facing other issue with Tabview

I am posting the code:

    <h:form id="compositionmaster">
    <p:tabView id="tabView">

    <p:tab id="tab1" title="Committee Details">

                <h:panelGrid columns="2" columnClasses="label, value">
                    <h:outputText value="Committee Type: " />
                    <p:selectOneMenu  id="type" value="#{userWizard.comm.committeeType}" effect="fade">
                         <f:selectItem itemLabel="----Select----" itemValue="0" />  
                         <f:selectItem itemLabel="New" itemValue="1" />                 
                         <f:selectItem itemLabel="Existing" itemValue="2"  />

                    </p:selectOneMenu>

                    <h:outputText value="Concerned Division: " />
                    <p:selectOneMenu  id="division" value="#{userWizard.comm.committeeSubType}" effect="fade">  
                        <f:selectItem itemLabel="----Select----" itemValue="0" />  
                        <f:selectItem itemLabel="Administration" itemValue="1"/>
                        <f:selectItem itemLabel="Finance" itemValue="2" />
                        <f:selectItem itemLabel="Marketing" itemValue="3" />
                        <f:selectItem itemLabel="Others" itemValue="4" />   
                    </p:selectOneMenu>

                    <h:outputText value="Committee Name: " />
                    <p:inputText value="#{userWizard.comm.committeeName}" maxlength="100"/>

                    <h:outputText value="Subject: " />
                    <p:inputText value="#{userWizard.comm.committeeSubject}" maxlength="100" />

                    <h:outputText value="Description: " />
                    <p:inputText value="#{userWizard.comm.committeeDescription}" maxlength="500" />

                    <h:outputText value="Tenure of Committee: " />
                    <p:panelGrid columns="2" >
                        <p:inplace id="Tenure"  label="From">
                             <p:calendar value="#{userWizard.comm.startDate}" id="start" showOn="button" />
                        </p:inplace>
                        <p:inplace label="To">
                             <p:calendar value="#{userWizard.comm.endDate}" id="end" showOn="button" /> 
                        </p:inplace>
                    </p:panelGrid>
                    <h:outputText value="Add Document: " />

                    <h:form enctype="multipart/form-data">

                        <p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" mode="advanced" update="messages"  multiple="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|doc|pdf)$/"/>

                    </h:form>
              </h:panelGrid>     
        </p:tab>

    <p:tab id="tab2" title="Godfather Part II">
        <h:panelGrid columns="2" cellpadding="10">

            <h:outputText id="tab2Text" value="stature grows."/>
        </h:panelGrid>
    </p:tab>

    <p:tab id="tab3" title="Godfather Part III">
        <h:panelGrid columns="2" cellpadding="10">

            <h:outputText id="tab3Text" value="After a promise that his family would one day be completely legitimate."/>
        </h:panelGrid>
    </p:tab>

</p:tabView>

</h:form>

Upvotes: 0

Views: 4531

Answers (1)

Matyas
Matyas

Reputation: 13702

Don't use nested forms

HTML doesn't allow nested forms, so you shouldn't use them in primefaces either.They can cause undesired behavior.

See: other stackoverflow questions, or a nice collection of things to avoid in JSF: here (note point 2)

This is the only problem I see in your code. Other than that in rare cases you might have problems if using ajax and not processing the whole form. But as I can see this is not the case in your code.

Upvotes: 3

Related Questions