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.
Related
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
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
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! :)
I want to create tabs with progress bar. Something like this:
<p:tabView id="tabs" dynamic="true" cache="false">
<p:tab id="tab1" title="tab1" >
<ui:include src="tab1.xhtml" />
</p:tab>
<p:tab id="tab2" title="tab2" >
<ui:include src="tab2.xhtml" />
</p:tab>
<p:blockUI block="tabs" trigger="tabs">
LOADING
</p:blockUI>
</p:tabView>
But it's not working. Can you help me to correct my mistake?
Try this:
<p:tabView id="tabs">
<p:ajax event="tabChange" onstart="BUI.show()" oncomplete="BUI.hide()" />
<p:tab id="tab1" title="tab1">
<h:outputtext value="TAB 1" />
</p:tab>
<p:tab id="tab2" title="tab2">
<h:outputtext value="TAB 2" />
</p:tab>
</p:tabView>
<p:blockUI widgetVar="BUI" block="tabs">
LOADING
</p:blockUI>
Following code works for me (Primefaces 5.2)
<p:blockUI block="tabs" widgetVar="tabsBlocker">
LOADING
</p:blockUI>
<p:tabView id="tabs" dynamic="true" cache="false"
onTabChange="PF('tabsBlocker').show()"
onTabShow="PF('tabsBlocker').hide()">
<p:tab id="tab1" title="tab1" >
<ui:include src="tab1.xhtml" />
</p:tab>
<p:tab id="tab2" title="tab2" >
<ui:include src="tab2.xhtml" />
</p:tab>
</p:tabView>
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 :)