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>
Related
<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.
I'm attempting to use a t:radio in my rich:datatable but it's always complaining about the fact that it can't find the component. I did some googling and I have to declare the full name, but I actually think I'm doing that.
Anyone can point me what I'm doing wrong? The code (I'm not going to give a minified version because I'm guessing it's going wrong with the compositions):
letterDetailTemplate.xhtml:
<h:form id="generateLetterForm">
<ui:include src="addStandardLetterMain.xhtml" />
<ui:include src="addStandardLetterText.xhtml" />
<ui:include src="buttons.xhtml" />
</h:form>
addStandardLetterText.xhtml (the radio button is over here, in the slrDataTable):
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:e="http://minfin.regondes2/entity"
xmlns:ccffdecorate="http://java.sun.com/jsf/composite/ccffdecorate"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:l="http://minfin.regondes2/layout"
xmlns:o="http://omnifaces.org/ui"
xmlns:t="http://myfaces.apache.org/tomahawk">
<ui:param name="entityBB" value="#{letterBB}" />
<ui:param name="type" value="Dossier.Letter" />
<l:screenzone id="addStandardLetterTextPanel"
title="#{AppMessages[type.concat('.addStandardLetterText.title')]}">
<h:outputStylesheet name="letterText.css" library="stylesheets" />
<h:outputScript name="letter.js" library="scripts" />
<a4j:region>
<a4j:outputPanel id="letterTextPanel">
<h:inputTextarea id="letterText" name="letterText"
value="#{entityBB.entity.text}" styleClass="letterText" />
<script type="text/javascript">
language: '#{screen.locale.language}'
CKEDITOR.replace( 'generateLetterForm:letterTex', {
});
</script>
</a4j:outputPanel>
<h:panelGroup styleClass="rButtonPanelAlignLeft" layout="block"
rendered="#{dossierContextBB.dossierContext == 'EDIT'}">
<a4j:commandButton
value="#{AppMessages[type.concat('.add.region')]}"
actionListener="#{entityBB.findAvailableRegionStandardLetters()}"
render="slrPopupFormPanel" limitRender="true" status="ajaxStatus"
onclick="LETTER.CKUpdate()"
oncomplete="#{rich:component('addStandardLetterRegion')}.show();" />
</h:panelGroup>
</a4j:region>
<rich:popupPanel id="addStandardLetterRegion" modal="true"
onmaskclick="#{rich:component('addStandardLetterRegion')}.hide()"
autosized="true">
<f:facet name="header">
<h:outputText
value="#{AppMessages['Dossier.Letter.StandardLetter.region.popup.title']}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('addStandardLetterCentrum')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<a4j:outputPanel id="slrPopupFormPanel">
<t:selectOneRadio id="slrOption"
value="#{standardLetterBB.selected}" layout="spread"
converter="#{standardLetterBB.converter}">
<f:selectItems value="#{entityBB.availableStandardLetterText}"
var="standardLetter" itemLabel="" itemValue="#{standardLetter}" />
</t:selectOneRadio>
<rich:dataTable id="slrDataTable"
value="#{entityBB.availableStandardLetterText}"
var="standardLetter" noDataLabel="No standard letters found"
rowKeyVar="index">
<rich:column headerClass="ListTitle">
<t:radio for="generateLetterForm:slrDataTable:slrOption" index="#{index}" />
</rich:column>
<e:column entity="#{standardLetter.dossierType}" type="#{type}"
property="type" />
<e:column entity="#{standardLetter}" type="#{type}"
property="numbering" />
<e:columnTranslatable entity="#{standardLetter}" type="#{type}"
property="text" />
</rich:dataTable>
</a4j:outputPanel>
<div class="rButtonPanel">
<h:commandButton value="#{AppMessages['general.action.add']}">
<a4j:ajax event="click" execute="generateLetterForm"
listener="#{entityBB.addMotivationToReport}"
oncomplete="#{rich:component('addStandardLetterRegion')}.hide()"
render="reportMotivationTextPanel" limitRender="true" />
</h:commandButton>
<a4j:commandButton value="#{AppMessages['general.action.cancel']}"
onclick="#{rich:component('addStandardLetterRegion')}.hide()"
limitRender="true" immediate="true" bypassUpdates="true" />
</div>
</rich:popupPanel>
</l:screenzone>
Note that this view works and renders and displays the data from the backingbean when I remove the t:radio.
The errormessage I'm getting is:
SEVERE: java.lang.IllegalStateException: Could not find component 'generateLetterForm:slrDataTable:slrOption' (calling findComponent on component 'generateLetterForm:slrDataTable:0:j_idt258')
javax.faces.FacesException: java.lang.IllegalStateException: Could not find component 'generateLetterForm:slrDataTable:slrOption' (calling findComponent on component 'generateLetterForm:slrDataTable:0:j_idt258')
Change for="generateLetterForm:slrDataTable:slrOption" to for=":generateLetterForm:slrOption" and specify id for your t:radio in datatable also. Don't forget the ":" before generateLetterForm.
In the code below, after logging in, ui:include is OK (changing), outputText is OK (changing), and ui:insert is not changing.
template.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" (...) >
<h:head></h:head>
<h:body>
<p:panel header="LoginForm" >
<ui:insert name="#{userBean.loggedIn?'logoutForm':'loginForm'}" />
<ui:include src="#{userBean.loggedIn?'incA.xhtml':'incB.xhtml'}" />
<h:outputText value="#{userBean.loggedIn?'print logoutForm':'print loginForm'}" />
</p:panel>
</h:body>
</html>
index.xhtml:
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml" (...) >
<ui:define name="loginForm">
<h:form >
<p:inputText id="usernameInput" value="#{credentialsBean.username}" />
<p:password id="passwordInput" value="#{credentialsBean.password}" />
<p:commandButton value="Log in" action="#{loginBean.actionLogin}" ajax="false" type="submit" />
</h:form>
</ui:define>
<ui:define name="logoutForm" >
<h:form >
<p:commandButton value="Logout" type="submit" action="#{loginBean.actionLogout}" ajax="false" />
</h:form>
</ui:define>
</ui:composition>
Is it normal behavior?
ui:insert's name property is evaluated in the build JSF tree phase. Use ui:include instead ui:insert to be happy.
I have a problem which I cannot solve. When I open JSF tab and I try to click on the buttons the page is not working.
Main page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
<style type="text/css">
.settingsHashMap { font: 80% "Trebuchet MS", sans-serif;}
</style>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> Rack Management Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Datacenter Profile" style="position:relative" value="resources/images/logo_datacenter_profile.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px">
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<li>#{tab.tabid}</li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{DatacenterProfileController.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq DatacenterProfileController.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
Tab page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form id="zones" >
<p:growl id="growl" showDetail="true" sticky="true" />
<!-- The sortable data table -->
<h:dataTable onmouseover="addOnclickToTabsDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{zones}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabZonesController.mainSelectAll}" class="checkall" >
<f:ajax listener="#{DCProfileTabZonesController.selectAll}" render="#form" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{DCProfileTabZonesController.selectedIds[item.datacenterid]}" >
<!-- if the user deselects one row deselect the main checkbox -->
<f:ajax listener="#{DCProfileTabZonesController.deselectMain}" render="#form" />
</h:selectBooleanCheckbox>
<!-- Click on table code -->
<h:outputLink id="lnkHidden" value="ZoneProfile.jsf" style="text-decoration:none; color:white; background-color:black">
<f:param name="id" value="#{item.datacenterid}" />
</h:outputLink>
</h:column>
............
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabZonesController.pageNext}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabZonesController.pageLast}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{DCProfileTabZonesController.currentPage} / #{DCProfileTabZonesController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{DCProfileTabZonesController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{DCProfileTabZonesController.page}"
rendered="#{page != DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:white;">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandLink>
<h:outputText value="#{page}" escape="false"
rendered="#{page == DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:gray;"/>
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{DCProfileTabZonesController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabZonesController.pageFirst}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{DCProfileTabZonesController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form"></f:ajax>
</h:commandButton>
<!-- the delete button -->
<h:button styleClass="bimage" value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />
<!-- New Zone -->
<h:button id="newzone" styleClass="lbimage" value="New Zone" outcome="/NewZone.xhtml"/>
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
When I remove the ui:composition tag and I insert all the code into one page the buttons are working.
As you pointed out in one of your comments, you cannot use nested forms. You need to restructure your layout. Place your outer form around your <ul>:
<h:panelGroup id="tabs" layout="block">
<h:form prependId="false">
<ul>
...
</ul>
</h:form>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
...
</c:forEach>
</h:panelGroup>
The rest of you code should be OK. By this way you avoid nested forms.
I have a page that load (in a panelGroup) two different page, due to the login status (logged, not logged). This is the main switch :
template.xhtml P.S. selector.page is "homepage" as default
<h:panelGroup layout="block" styleClass="contenitore">
<h:panelGroup layout="block">
<h:panelGroup layout="block" styleClass="menu_table" id="login">
<ui:insert name="login_homepage" />
</h:panelGroup>
<h:panelGroup layout="block" id="content">
<c:catch>
<ui:include src="/#{selector.page}/#{selector.page}.xhtml" />
</c:catch>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
homepage.xhtml
<h:panelGroup rendered="#{!user.loggedIn}">
<h:panelGroup layout="block" styleClass="content_title">
Homepage
</h:panelGroup>
</h:panelGroup>
<h:panelGroup rendered="#{user.loggedIn}">
<ui:include src="/profile/profile.xhtml" />
</h:panelGroup>
login
<ui:define name="login_homepage">
<h:form id="formLogin" prependId="false">
<h:inputHidden value="#{selector.page}" id="page" />
<h:panelGroup rendered="#{!user.loggedIn}">
<h:outputScript name="jsf.js" library="javax.faces" target="head" />
<h:outputLabel styleClass="menu_span" value="Username" />
<h:inputText value="#{user.nickname}" id="nickname" />
<h:outputLabel styleClass="menu_span" value="Password" />
<h:inputSecret value="#{user.password}" id="password" />
<h:outputLabel styleClass="menu_span">
<h:commandButton value="Login" action="#{user.checkLogin}">
<f:ajax event="action" execute="nickname password page" render=":login :content err"/>
</h:commandButton>
</h:outputLabel>
</h:panelGroup>
<h:panelGroup rendered="#{user.loggedIn}">
<h:outputLabel styleClass="menu_title" value="LOGGED" />
</h:panelGroup>
</h:form>
</ui:define>
profile.xhtml
<h:panelGroup layout="block" id="profileContent">
<h:form id="formProfile">
<h:outputScript name="jsf.js" library="javax.faces" target="head" />
<h:panelGroup rendered="#{profileSelector.profilePage=='main'}">
<ui:include src="/profile/profile_main.xhtml" />
</h:panelGroup>
<h:panelGroup rendered="#{profileSelector.profilePage=='edit' || profileSelector.profilePage=='editConfirm'}">
<ui:include src="/profile/profile_edit.xhtml" />
</h:panelGroup>
</h:form>
</h:panelGroup>
ProfileSelector is #ViewScope scoped. When i load the page and im logged, it initialize the ProfileSelector bean. Else, if i'm not logged and i do the login, it change the Content from homepage to profile, but the Bean is not initalized. So, how can i inizialize this bean when im not logged?
I think the code above is sufficent to understand the problem.
Cheers
A similar bug
http://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-928
<c:catch>
<ui:include src="/#{selector.page}/#{selector.page}.xhtml" />
</c:catch>
The problem is that you are using JSTL elements which break #ViewScope use alternative.