<ui:composition>
<ui:decorate template="/view-fragments/section/frag_section.xhtml" >
<ui:param name="AttrId" value="SOME_VALUE" />
<ui:param name="AttrMinimized" value="false" />
<ui:define name="AttrContentTitle">
Some Title
</ui:define>
<ui:param name="AttrCollapsable" value="false" />
<ui:define name="AttrContentBody">
<h:form id="form_some_form" class="form-horizontal">
<p:tabView id="tabView" widgetVar="tabView" dynamic="true" rendered="true" cache="true">
<p:tab id="tab1" title="title1">
</p:tab>
<ui:include src="/view-fragments/project/frag_tab2.xhtml" />
<ui:include src="/view-fragments/project/frag_tab3.xhtml" />
<ui:include src="/view-fragments/project/frag_tab4.xhtml" />
<ui:include src="/view-fragments/project/frag_tab5.xhtml" />
<ui:include src="/view-fragments/project/frag_tab6.xhtml" />
</p:tabView>
</h:form>
</ui:define>
</ui:decorate>
</ui:composition>
This doesn't load tab2, tab3...etc. content to the tabView. but the content is shown if I take it off the p:tabView. Can anyone help? Thank you.
Related
I am using JSF 2.0 with PrimeFaces 5.0, I have three tabs in my application, the first tab is the master and the remaining two tabs are details which are based on the row selection from master. The problem is that when I set dynamic="true" and cache="false" then all the tabs are refreshing.I want to keep the cache for the master and just only refresh the details(other two tabs)
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="/WEB-INF/template/master.xhtml">
<ui:define name="title">
#{loc.Clients_Title_Name_Index}
</ui:define>
<ui:define name="head">
<ui:define name="content">
<h:form id="stepsForm">
<p:steps
activeIndex="#{retClientsBean.activeTabIndex}" styleClass="custom" >
<p:menuitem value="Ret Clients"/>
<p:menuitem value="Ret Accounts"/>
<p:menuitem value="Ret Contracts"/>
</p:steps>
</h:form>
<h:form>
<p:remoteCommand name="updateListForm"
update="tabs:RetAccountsForm tabs:RetContractsForm"></p:remoteCommand>
</h:form>
<p:tabView id="tabs" dynamic="true" cache="false">
<p:ajax event="tabChange" update=":stepsForm"
listener="#{retClientsBean.onTabChange}" />
<p:tab id="ClientsListTab"
title="Ret Clients">
<ui:include src="ClientsList.xhtml"/>
<ui:include src="EditClientsDialog.xhtml"/>
<ui:include src="CreateClientsDialog.xhtml"/>
</p:tab>
<p:tab id="RetAccountsTab" title="Ret Accounts">
<ui:include src="/Admin/RetAccounts/List.xhtml" />
<ui:include src="/Admin/RetSituationsAccount/RetSituationsAccountList.xhtml"/>
<ui:include src="/Admin/RetLimitsAccounts/RetLimitsAccountsList.xhtml"/>
<ui:include src="/Admin/RetCards/RetCardsList.xhtml"/>
</p:tab>
<p:tab id="RetContractsTab"
title="Ret Contracts">
<ui:include src="/Admin/RetContracts/List.xhtml" />
<ui:include src="/Admin/RetInstallmentsContract/RetInstallmentsContractList.xhtml" />
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
Click here to see the application View
I have a main HTML page which includes detail.xhtml and duo.xhtml.
Now duo.xhtml also includes detail.xhtml, which results in duplicate IDs which of course it not working. What can I do to solve this problem? I don't want to manage redundant code.
Main:
<ui:composition ...>
<ui:define name="center">
<ui:insert name="insertDuo">
<ui:include src="/includes/duo.xhtml" />
</ui:insert>
...
<p:dialog header="x" widgetVar="detDialog" id="dlg" modal="true" appendTo="#(body)">
<ui:insert name="insertDetail">
<ui:include src="/includes/detail.xhtml" />
</ui:insert>
Duo:
<ui:composition>
<p:dialog header="y" widgetVar="newDuoDialog" id="newDuoDlg" modal="true" >
<p:layout id="layout">
<p:layoutUnit position="west">
<ui:insert name="insertDetailStmt">
<h:form id="stmtDetailForm">
<ui:include src="/includes/detail.xhtml" />
</h:form>
</ui:insert>
</p:layoutUnit>
Detail:
<p:accordionPanel id="accordion">
Reference to components:
<p:commandButton value="z" update=":accordion:duoDlgForm2:pickList"/>
Thanks to BalusC, I was able to solve the problem. Just use
<f:subview id="fromMain">
<ui:include src="/includes/regelDetail.xhtml" />
</f:subview>
and when referred from main, the element's name is fromMain:accordion
Hi guys I want to link from my Menubar to certain Tab, but always the first tab is activated I tried lot of solutions from StackOverflow but nothing works. I think the problems is that i use a preRenderView. I hope someone can help me :)
I use jsf 2.1 and primefaces 3.5
The code for the menubar
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Inbox" url="taskbox.xhtml" />
<p:menuitem value="Sent" url="taskbox.xhtml#sentTab"/>
<p:menuitem value="Trash" url="taskbox.xhtml" onclick="tabPanel.select(3)"/>
<p:menuitem value="New Message" url="#"/>
</p:submenu>
</p:menubar>
Der code for the tabs
<ui:composition template="/META-INF/templates/templateContentSplit.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="metadata">
<f:metadata>
<f:event type="preRenderView" listener="#{taskboxBean.initPage}" />
</f:metadata>
</ui:define>
<ui:define name="title">
<h:outputText value="Taskbox" />
</ui:define>
<ui:define name="contentLeft">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel">
<p:tab title="Inbox" id="inboxTab">
<ui:include src="/user/inboxTaskbox.xhtml" />
</p:tab>
<p:tab title="Sent" id="sentTab">
<ui:include src="/user/sentTaskbox.xhtml" />
</p:tab>
<p:tab title="Trash" id="trashTab">
<ui:include src="/user/trashTaskbox.xhtml" />
</p:tab>
</p:tabView>
</h:form>
</ui:define>
<ui:define name="contentRight">
<h:form id="contentForm">
<ui:include src="/user/detailTaskbox.xhtml" />
</h:form>
</ui:define>
</ui:composition>
For your <p:menuitem /> use an outcome attribute, which specifies the navigation case, instead of url, that's intended to be used with an absolute and not JSF related url. Here you've got a basic explanation case, based in #Daniel Camargo's suggested code:
tabs.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<f:metadata>
<f:viewParam name="index" value="#{index}" />
<f:event type="preRenderView" listener="#{bean.initPage}" />
</f:metadata>
<h:form>
<p:menubar>
<p:submenu label="Taskbox">
<!-- Different ways of passing the view param -->
<p:menuitem value="Inbox" outcome="tabs?index=0" />
<p:menuitem value="Sent" outcome="tabs.xhtml?index=1" />
<p:menuitem value="Trash" outcome="tabs">
<f:param name="index" value="2" />
</p:menuitem>
<!-- External url -->
<p:menuitem value="Google" url="http://www.google.com"
target="_blank" />
</p:submenu>
</p:menubar>
</h:form>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel"
activeIndex="#{index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
Note the outcome attribute here let's the JSF servlet evaluate the destination url. Basically, an outcome with value of tabs will get rendered as basePath/tabs.xhtml at client side. So basically you are making the page be directed to itself, but changing the viewParam value.
See also:
When should I use h:outputLink instead of h:commandLink?
Remember that this is a zero based index. You tabPanel.select(3) will try to activate the 4th tab which doesn't exist. Try doing this:
The menu:
<h:form>
<p:menubar >
<p:submenu label="Taskbox" >
<p:menuitem value="Trash" url="taskbox.xhtml?index=2"/>
</p:submenu>
</p:menubar>
</h:form>
The Taskbox page:
<f:metadata>
<f:viewParam name="index" value="#{viewMBean.index}" />
</f:metadata>
<h:form id="postForm">
<p:tabView id="tabViewPosts" widgetVar="tabPanel" activeIndex="#{viewMBean.index}">
<p:tab title="Inbox" id="inboxTab">
A
</p:tab>
<p:tab title="Sent" id="sentTab">
B
</p:tab>
<p:tab title="Trash" id="trashTab">
C
</p:tab>
</p:tabView>
</h:form>
I have a problem. Just sometimes i get this error "duplicate Id for a component mainForm:_id251:_id254" when i press one of those buttons.
What i'm doing wrong?
<ui:decorate template="/tags/panelPage.jspx">
<ui:define name="content">
<a4j:region>
....
<a4j:commandButton actionListener="#{pageBean.filter}" id = "filter"
rendered="true"
reRender="block6include,block7include, block8include, block9include">
</a4j:commandButton>
<a4j:commandButton actionListener="#{pageBean.resetFilter}" id = "reset"
rendered="true"
reRender="block6include, block7include, block8include, block9include">
</a4j:commandButton>
<!-- BLOCK6-->
<h:panelGroup id="block6include">
<a4j:include viewId="block6.jspx"/>
</h:panelGroup>
<!-- /BLOCK6-->
<!-- BLOCK7 -->
<h:panelGroup id="block7include">
<a4j:include viewId="block7.jspx"/>
</h:panelGroup>
<!-- /BLOCK7 -->
<!-- BLOCK8 -->
<h:panelGroup id="block8include">
<a4j:include viewId="block8.jspx"/>
</h:panelGroup>
<!-- /BLOCK8-->
<!-- BLOCK9 -->
<h:panelGroup id="block9include">
<a4j:include viewId="block9.jspx"/>
</h:panelGroup>
<!-- /BLOCK9-->
...
</ui:define>
</ui:decorate>
</a4j:region>
"/tags/panelPage.jspx"
...
<a4j:form id="mainForm" enctype="#{entype}">
...
<ui:insert name="content"/>
...
</a4j:form>
"block6.jspx"
<ui:composition>
<ui:decorate template="/tags/panelBlock.jspx">
<ui:param name="id" value="block61"/>
<ui:define name="content">
...
</ui:define>
</ui:decorate>
<ui:decorate template="/tags/panelBlock.jspx">
<ui:param name="id" value="block62"/>
<ui:define name="content">
...
</ui:define>
</ui:decorate>
</ui:composition>
"/tags/panelBlock.jspx"
<rich:panel id="#{id}">
...
<ui:insert name="content"/>
...
</rich:panel>
I have the following view:
<ui:composition template="/templates/cmsLayout.xhtml">
<ui:define name="rightPane">
<div class="rightPane_header">
<p:tabMenu activeIndex="0">
<p:menuitem value="Home" url="/userHome.faces" />
...
</p:tabMenu>
</div >
<div class="rightPaneData">
<h:form>
<p:growl id="growl"/>
<p:accordionPanel activeIndex="0" dynamic="false" cache="false">
<p:tab title="My Document">
<f:event type="preRenderComponent" listener="#{documentController.getMyDocumentsForHome()}" />
<p:dataTable id="homeMyDocTable" var="myDocument" value="#{documentController.myDocuments}" rowKey="#{myDocument.docId}"
selection="#{documentController.selectedDocument}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{documentController.viewDocumentDetailPage}" />
<p:column headerText="Document Number" id="homeMyDocNumber" styleClass="FixedcolumnWidth">
<h:outputText value="#{myDocument.docId}" />
</p:column>
...
</p:dataTable>
<p:commandLink value="More.." rendered="#{documentController.myDocMoreStatus}" action="#{documentController.viewMyDocumentPage}" />
</p:tab>
</p:accordionPanel>
</h:form>
</div>
</ui:define>
</ui:composition>
The <p:commandLink> with value of "More.." works fine in IE, but not in FF/Chrome. How is this caused and how can I solve it?