I have a 3 layer tab structure in primefaces.First layer contains 2 tabs say Business and Individual.Business tab contains some other tabs.Now the issue is if I click on Individual tab then all the tabs inside Business tab also gets loaded even though there is no dependency between them.
PS : I'm using Primefaces 5.3
Here's my code:
<p:tabView id="i" widgetVar="TabV" prependId="false" cache="false" dynamic="true">
<p:tab title="Business">
<p:tabView id="Busi" prependId="false" cache="false" dynamic="true">
<p:tab title="C&I">
<p:tabView id="CI" prependId="false" cache="false" dynamic="true">
<p:tab title="Business1">
<ui:include src="CI//xyz.xhtml" />
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="CRE">
<p:tabView id="CRE" prependId="false" cache="false" dynamic="true">
<p:tab title="Business2">
<ui:include src="CRE//def.xhtml" />
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="Individual">
<p:tabView id="PFS" prependId="false" cache="false" dynamic="true">
<p:tab title="Individual">
<ui:include src="PFS//abc.xhtml" />
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
Related
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! :)
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>
I have a page named Tabview1 which composed of tabview.
Tabview1.xhtml:
<p:tabView>
<p:tab title="1">
<ui:include src="/Apanel.xhtml"/>
</p:tab>
<p:tab title="2">
</p:tab>
<p:tab title="3">
</p:tab>
</p:tabView>
I want to forward to the page Tabview2.xhtml if click on the tab named 2.
Tabview2.xhtml:
<p:tabView>
<p:tab title="1">
</p:tab>
<p:tab title="2">
<ui:include src="/Bpanel.xhtml"/>
</p:tab>
<p:tab title="3">
</p:tab>
</p:tabView>
Who can help me ?
Tabview creates a list with one element for each tab. Every <li> contains an <a href="#j_idtXXX">. Create a script on your site that changes these links to Tabview2.xhtml. For example if you set the id of your tabview to "tabview":
jQuery("#tabview ul a").first().attr("href", /MyPortal/Tabview2.jsf?tab=0);
This would cause the first tab to lead to the new page, and select the right tab on that page if you have configured a viewparam and have activeIndex="#{controllerClass.activeIndex}" set on the tabview.
I'm in a rush now, so I only had time to write a short example, but if you have some skill with javascript, it should not be too hard.
<p:tabView>
<p:tab title="Title1">
<p:panel>
<ui:include src="tabView1.xhtml" />
</p:panel>
</p:tab>
<p:tab title="Title 2">
<p:panel>
<ui:include src="tabView2.xhtml" />
</p:panel>
</p:tab>
</p:tabView>