I want to know how to do show a panelgroup if is selected specific tab of accordionPanel Primefaces.
<p:accordionPanel id="myAccordion" activeIndex="1">
<p:tab title="first" id="tab0">
...
</p:tab>
<p:tab title="second" id="tab2">
...
</p:tab>
</p:accordionPanel>
<h:panelGroup id="myPanelGroup" rendered="#{myAccordion.activeIndex=='0'}">
...
</h:panelGroup>
Thank you.
H
Just check prime face showcase they have ajax event for your reference
<p:ajax event="tabChange" listener="#{tabbedView.onTabChange}" update=":form:msgs" />
<p:ajax event="tabClose" listener="#{tabbedView.onTabClose}" update=":form:msgs" />
Once you get your tab index you can do whatever you want to do and update your panel according your need.
https://www.primefaces.org/showcase/ui/panel/accordionPanel.xhtml
Related
I work on a xhtml page which uses two tabs which contain command buttons.
After one command button clicked in Tab1, which contains "Person Information", then the other tab, which has "Address Information" is opened.
My second tab has selectOneMenu with using p:ajax listener. After clicking first button, second tab is not visible, and besides the command button in the Tab1 is not fired.
After using different components such as outputText, components of Tab2 became visible. Could you have any solution for this problem?My code is as shown in below:
Code:
<h:form>
<p:accordionPanel>
<p:tab title="Person Information">
<h:panelGrid>
<p:selectOneMenu filterEnable="true"
disabled="#{bean1.disableChoosePerson}" required="true"
value="#{bean1.person}">
<f:selectItems value="#{bean1.personList}" />
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="save" rendered="#{bean1.renderSave}"
action="#{bean1.actionSavePerson}" />
</p:tab>
<p:tab title="Address Information"
disabled="#{bean1.adressDisabled}">
<h:panelGrid>
<p:selectOneMenu value="#{bean1.selectedProvince}"
required="true">
<p:ajax listener="#{bean1.actionHandleChangeProvince}" />
<f:selectItems value="#{bean1.provinceList}" />
</hm:selectOneMenu>
</h:panelGrid>
<h:panelGrid>
<hm:commandButton value="save" rendered="#{bean1.renderSave}"
action="#{bean1.actionSaveAddress}" />
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
i have a serious problem with jsf tabview and form
inside my tabview i have to input text and submit button whenever i submit i always have a empty value.
<h:form id="form">
<p:tab id="tabview" title="Ressources Humaines">
<p:tabView activeIndex="#{SelectBean.activeTab}" value="#{SelectBean.types}" var="item" >
<p:ajax event="tabChange" listener="#{SelectBean.onTabChange}" update=":form" />
<p:tab title="#{item}">
<p:tabView id="tab" activeIndex="#{SelectBean.other}" value="#{SelectBean.res}" var="rr">
<p:ajax event="tabChange" listener="#{SelectBean.onTabChange1}" />
<p:tab title="#{rr.nom_ressource}">
<p:panel rendered ="#{SelectBean.bol}" closable="true" toggleable="true" styleClass="outPanel">
<p:growl id="growl" showDetail="true" />
<h:outputLabel value="Nom " />
<h:inputText value="#{SelectBean.nom}" />
<br/>
<h:outputLabel value="Experience " />
<h:inputText value="#{SelectBean.exp}" />
<br/>
<h:commandButton immediate="true" value="Modifier" action="#{SelectBean.ok}"/>
</p:panel>
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</h:form>
the SelectBean.nom and SelecBean.exp are always empty any help please
The problem is with your
<h:commandButton immediate="true" value="Modifier" action="#{SelectBean.ok}"/>
The immediate attribute action method causes JSF to go directly to the render phase 'of the same view' by calling facesContext.renderResponse(), then the components will behave as they do for a validation failure - by displaying the value cached in the component rather than fetching data from the backing bean.
Here is a list of possible solutions
My problem is when I put <p:accordionPanel> in another <p:accordionPanel> the second <p:ajax> don't work, I like put
<p:ajax event="tabChange"
listener="#{functionWorkflow.onTabChangeWorkflow}"
update="#all" />
for the first <p:accordionPanel> and
<p:ajax event="tabChange" listener="#{functionWorkflow.onTabChangeStep}" />
for the second <p:accordionPanel> like this:
<h:form id="formFunction">
<p:accordionPanel value="#{functionWorkflow.listWorkflowTemplate}" var="workflowTemplate" activeIndex="null" id="panelWorkflow" dynamic="true">
<p:ajax event="tabChange" listener="#{functionWorkflow.onTabChangeWorkflow}" update="#all" />
<p:tab title="Workflow: #{workflowTemplate.nome}" >
<h:form>
<p:accordionPanel value="#{functionWorkflow.listWorkflowstep}" var="workflowTemplateStep" activeIndex="null" >
<p:tab title="step #{workflowTemplateStep.stepOrder} : " >
<p:accordionPanel value="#{functionWorkflow.logStepContatti}" var="stepContatti" activeIndex="null" dynamic="true" onTabShow="#{functionWorkflow.onTabChangeStep(workflowTemplateStep)}">
<p:ajax event="tabChange" listener="#{functionWorkflow.onTabChangeWorkStep}" update="#all" />
<p:tab title="Contatto: #{stepContatti.contatti.nome} : " >
</p:tab>
</p:accordionPanel>
</p:tab>
</p:accordionPanel>
</h:form>
</p:tab>
</p:accordionPanel>
</h:form>
The result like this,
Finally I would like calling different methods for only level <p:accordionPanel>.
Help me thanks.
I haven't tried to put accordion into accordion before, so there may be a bug, but firstly I would recommend to remove one of the h:forms. You should never put form into form. If this doesn't help, i will run a quick test on this.
I try to add tabs dynamically using ui:include, but I can not get the good behavior!
If I look at the HTML response, the content is there, but does not appear in the tab.
If i try to open a 2nd tab with an other content the html result contain the same content as the 1st tab.
A tab is added with the following command:
<p:commandLink id="appC1" update=":tabview" actionListener="#{tview.sideBarAction}"
value="App 1">
<f:param id="c1ParamId" name="pageViewId" value="App1" />
</p:commandLink>
and the tabview:
<p:tabView id="tabview" value="#{tview.tabs}" var="tab">
<p:tab title="#{tab.title}" closable="true">
<p:panel id="myPanel">
<ui:include src="#{tab.content}"/>
</p:panel>
</p:tab>
</p:tabView>
I tried to do this programmatically, but I have not had best results!
Try with c:forEach like that:
<p:tabView id="tabPanel" activeIndex="#{tabView.activeIndex}"
style="width: 100%; height: 100% !important;">
<p:ajax event="tabClose" listener="#{tabView.onTabClose}"/>
<p:ajax event="tabChange" listener="#{tabView.onTabChange}"/>
<c:forEach items="#{tabView.tabs}" var="tab">
<p:tab titletip="#{tab.id}" title="#{tab.label}" closable="true">
<ui:include src="#{tab.url}"/>
</p:tab>
</c:forEach>
</p:tabView>
Good luck! :)
Inside one tab, I can cilck on a button to display an "h:groupPanel". If I do this, and then change the active tab, the groupPanel that has just appeared is still visible, and appears on top of the now current tab.
The code for the tabView is:
<p:tabView dynamic="true" cache="false" id="characterTabView">
<p:tab title="View" id="viewTab">
<ui:include src="/sections/character/view.xhtml" />
</p:tab>
<p:tab title="Upgrade" id="upgradeTab">
<ui:include src="/sections/character/upgrade.xhtml" />
</p:tab>
</p:tabView>
The "upgrade" page looks like
<h:panelGroup id="searchCompetencies" rendered="#{characterBean.rightPanel == 'searchResult'}">
<h:panelGroup styleClass="characterUpgradeLeft">
<ui:include src="/sections/character/searchViewLeft.xhtml" />
</h:panelGroup>
<h:panelGroup id="competencyCreation" rendered="#{characterBean.rightPanel == 'competencyCreation'}">
<!-- The panel that is made visible -->
</h:panelGroup>
And the page in which the component is made visible (searchViewLeft):
<p:fieldset legend="Create competency" styleClass="createCompetencyStart">
<h:form>
<p:commandButton value="Create competency" type="button" onclick="toggleCreate()" update="upgradeTab" />
</h:form>
</p:fieldset>
where "toggleCreate" changes the value of "characterBean.rightPanel".
Would you have any idea as to what I am missing here?
Thanks a lot :)