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! :)
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 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>
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 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>
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 :)