My template.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>X</title>
<script type="text/javascript" src="js/primefaces-locale.js" />
</h:head>
<h:body style="margin: 0; padding: 0;height:100%;" >
<h:panelGroup id="mid" style="height:100%;">
<h:panelGroup id="menu" style="height:100%;width:15%;float:left;background-color:#EEEEEE;">
<ui:include src="menu.xhtml" />
</h:panelGroup>
<h:panelGroup id="content" style="height:100%;width:80%;float:left;overflow: hidden;margin-top: 1%; margin-left: 1%;">
<h:messages id="msgs" />
<ui:insert name="body" />
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
My index.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:define name="body">
<h:form id="formbody" >
<p:schedule id="prazos" locale="br" style="width: 100%;font-size:11px;font-weight:bold;" />
<h:outputText value="#{IndexBean.nome}" />
</h:form>
</ui:define>
</ui:composition>
My menu.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form id="formMenu">
<p:panelMenu style="width:100%;font-size:11px;font-weight:bold;">
<p:submenu label="Clientes">
<p:menuitem value="Cadastrar" id="btCadCliente" icon="ui-icon-disk" action="cadastroCliente.xhtml" update=":content" />
<p:menuitem value="Consultar" id="btConCliente" icon="ui-icon-search" action="consultaCliente.xhtml?faces-redirect=true" update=":content" />
</p:submenu>
</p:panelMenu>
</h:form>
</ui:composition>
My problem is when click on action button in menu.xhtml (for example). The ajax partial update on ":content" work perfect, but after render the page layout create a new blank line on top layout with following text: "xmlns="http://www.w3.org/1999/xhtml">". This text is uri namespace from template.xhtml.
Any help?
Related
I'm trying to use an image in my XHTML page
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<h:graphicImage library="default" value="img/image.jpg" />
</h:form>
</h:body>
</html>
and the resutl is that the file is not loaded
Try this instead, use the name attribute when you use the library attribute, or alternatively put the full path in value attribute.
1.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<h:graphicImage library="default" name="img/image.jpg" />
</h:form>
</h:body>
</html>
2.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<h:graphicImage value="/resources/default/img/image.jpg" />
</h:form>
</h:body>
</html>
Below is my code for my file upload page and I can't figure out why when the upload is done it doesn't update my datatable with if the upload was successful or not. I could do a like a do not render til after update but don't think that is supported with the fileupload command. I did a system out on my list and it does have the values in it so the list is fully populated and ready to display but my datatable isn't showing anything? Am I missing something?
Tomcat 7.0
JSF 2.2.1
Chrome/IE/Firefox
PrimeFaces 5.0
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="templates/template.xhtml">
<ui:define name="title">Ingest</ui:define>
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
<h:form>
<p:fileUpload fileUploadListener="#{ingestBean.ingestListener}"
label="choose" invalidFileMessage="Invalid file: "
allowTypes="/(\.|\/)(xml)$/" multiple="true" update="#form">
</p:fileUpload>
<p:dataTable var="errors" value="#{ingestBean.errorList}" id="errorTable">
<p:column headerText="File Name">
<h:outputText value="#{errors.fileName}" />
</p:column>
<p:column headerText="Status">
<h:form>
<h:commandLink action="#{ingestBean.getErrorInfo}"
value="errors.status">
<f:param name="id" value="#{errors.id}" />
</h:commandLink>
</h:form>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
Edit: After a bunch of testing and code rewriting I have got it partially working but it seems like it doesn't like to render in my template code... So I was wondering if there may be something wrong in my template code.
Template code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html" id="fview">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><ui:insert name="title">Page template with PrimeFaces</ui:insert></title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<style>
#leftPanel {
z-index: 1 !important;
}
#leftPanel div {
overflow: visible;
}
</style>
</h:head>
<h:body onload="statusDialog.hide();">
<h:outputStylesheet library="css" name="style.css" />
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();" />
<p:layout fullPage="true" resizeTitle="resize"
style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="202" header="Menu" id="leftPanel">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit styleClass="layoutUnitCenter" position="center">
<h:form id="mainForm">
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
After a bunch of testing and deleting and rewriting like all my code I have figured out it was a stupid error with layouts and the <f:view> so I removed that and
<p:ajaxStatus onstart="statusDialog.show();"
onsuccess="statusDialog.hide();" />
And everything seemed to work fine!
I am trying to create an application using JSF and Primefaces. Unfortunately, I have an issue about page templates and could not manage to work it out properly.
I have a page template like this. What I want is to load Left Menu and the Content with ajax request without loading whole page. However, when I click the page2 link, everything gets broken like this.
I tried different combinations of how to place form, include, composition tags but, it's still the same. Only change is my server response according to place of form tag. When I checked the response it seems alright. It does not try to load whole page and nothing seems wrong to me:
<?xml version='1.0' encoding='UTF-8'?>
<partial-response id="j_id1"><changes><update id="javax.faces.ViewRoot"><![CDATA[<script id="innerLayout_s" type="text/javascript">$(function(){PrimeFaces.cw( "Layout","widget_innerLayout",{id:"innerLayout",widgetVar:"widget_innerLayout",west:{paneSelector:'#left',size:"200",resizable:false,closable:false},center:{paneSelector:'#innerContent',size:"auto",resizable:false,closable:false}},"layout");}) ;</script><div id="innerLayout"><div id="left" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-west"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Left Menu</span></div><div class="ui-layout-unit-content ui-widget-content">
<form id="leftForm" name="leftForm" method="post" action="/Magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="leftForm" value="leftForm" />
Page2 Left Menu
</form></div></div><div id="innerContent" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">
<form id="contentForm" name="contentForm" method="post" action="/Magician/pages/page2.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="contentForm" value="contentForm" />
Page2 Content
</form></div></div></div>]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[2499963408064928377:-8018685353649439725]]></update></changes></partial-response>
However, when I look the console, there is an error like below:
Uncaught TypeError: Cannot read property '0' of null primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.Utils.updateElement primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.ResponseProcessor.doUpdate primefaces.js.xhtml?ln=primefaces&v=5.0:2
PrimeFaces.ajax.Response.handle primefaces.js.xhtml?ln=primefaces&v=5.0:2
p.success primefaces.js.xhtml?ln=primefaces&v=5.0:2
i jquery.js.xhtml?ln=primefaces&v=5.0:25
cd.fireWith jquery.js.xhtml?ln=primefaces&v=5.0:25
cg jquery.js.xhtml?ln=primefaces&v=5.0:25
i
Here are my codes:
default.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>My Application</title>
</h:head>
<h:body>
<h:outputStylesheet name="css/style.css" />
<p:layout id="fullPageLayout" fullPage="true">
<p:layoutUnit id="header" position="north" size="80">
<h:form id="headerForm">
<ui:insert name="headerUI">
<ui:include src="header.xhtml" />
</ui:insert>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="content" position="center">
<ui:insert name="contentUI" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
header.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<p:tabMenu id="tabMenu" activeIndex="#{templateBean.activeIndex}">
<p:menuitem value="page1" action="#{templateBean.navigateToPage(0)}" update=":contentForm,tabMenu" />
<p:menuitem value="page2" action="#{templateBean.navigateToPage(1)}" update=":contentForm,tabMenu" />
</p:tabMenu>
</ui:composition>
content.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<p:layout id="innerLayout">
<p:layoutUnit id="left" position="west" size="200" header="Left Menu">
<h:form id="leftForm">
<ui:insert name="leftUI" />
</h:form>
</p:layoutUnit>
<p:layoutUnit id="innerContent" position="center">
<h:form id="contentForm">
<ui:insert name="centerUI" />
</h:form>
</p:layoutUnit>
</p:layout>
</ui:composition>
index.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="templates/default.xhtml">
<ui:define name="contentUI">
<ui:include src="#{templateBean.activePage}.xhtml" />
</ui:define>
</ui:composition>
page1.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="templates/content.xhtml">
<ui:define name="leftUI">
<h:outputText value="Page1 Left Menu" />
</ui:define>
<ui:define name="centerUI">
<h:outputText value="Page1 Content" />
</ui:define>
</ui:composition>
page2.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="templates/content.xhtml">
<ui:define name="leftUI">
<h:outputText value="Page2 Left Menu" />
</ui:define>
<ui:define name="centerUI">
<h:outputText value="Page2 Content" />
</ui:define>
</ui:composition>
TemplateBean.java:
package com.myapplication.pagebeans;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;
#Component
#Scope("request")
public class TemplateBean {
private int activeIndex;
private String activePage = "page1";
public String navigateToPage(int index) {
activeIndex = index;
switch (index) {
case 0:
activePage = "page1";
break;
case 1:
activePage = "page2";
break;
default:
break;
}
return activePage;
}
public int getActiveIndex() {
return activeIndex;
}
public String getActivePage() {
return activePage;
}
}
Sorry for the long question and images (site does not let me to load images because of my reputation) but, I tried give information as much as I can.
Thanks in advance.
I searched a lot and already look at different questions like below ones:
How to include common content into multiple level template page
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Facelets multi-level templates - ui:define not rendered
PrimeFaces exension javascript error
I'm having trouble displaying the deploy-java button on ajax rerender
<h:form id="deployJavaForm" rendered="#{myBean.shouldRender}">
<h:outputScript library="js" name="http://java.com/js/deployJava.js" target="head" />
<script type="text/javascript">
deployJava.createWebStartLaunchButton('blah.jnlp', '1.7.0');
</script>
</h:form>
when
myBean.shouldRender == true
and the form is updated the only thing being displayed (on a white page) is the deployJava-button and the request is left hanging. if shouldRender is true on the initial request, page and button is displayed correctly.
Im using primefaces in case it can help.
What I want to do is to have the button to be displayed correctly regardless if its part of a ajax rerender or a complete initial request.
Update:
I did my homework and created a minimal example that still reproduces the problem. It seems I still get the same problems regardless if script declaration is in head or in body (I have copy of deployJava.js in resources/js)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
<h:outputScript library="js" name="deployJava.js" target="head" />
<h:form id="djForm">
<script type="text/javascript">
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</script>
<p:commandButton value="update" update="djForm" />
</h:form>
</h:body>
</html>
edit: (specialgems)
below test give same problem as observed earlier.
<h:outputScript>
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</h:outputScript>
edit: added picture
after click of update button, only deployJava button is rendered and page is loading
edit (daniel): both on success and oncomplete give same behaviour :(
<h:form id="djForm">
<h:outputScript>
function abcefg() {
deployJava.createWebStartLaunchButton('test.jnlp', '1.7.0');
}
</h:outputScript>
<p:commandButton value="update" update="djForm" onsuccess="abcefg()" />
</h:form>
Alternatively to using js and css visibility described in my comment you can write own composite button component. Using Firebug you can investigate which markup is generated by the deployJava.createWebStartLaunchButton script and add it by yourself statically. So your component could be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<head>
<title>deployJava Button component</title>
</head>
<body>
<composite:interface>
<composite:attribute name="version" required="true"
type="java.lang.String" />
<composite:attribute name="url" required="true"
type="java.lang.String" />
</composite:interface>
<composite:implementation>
<a onmouseover="window.status=''; return true;"
href="javascript:if (!deployJava.isWebStartInstalled("#{cc.attrs.version}")) {if (deployJava.installLatestJRE()) {if (deployJava.launch("#{cc.attrs.url}")) {}}} else {if (deployJava.launch("#{cc.attrs.url}")) {}}"><img
border="0" src="//java.com/js/webstart.png" /></a>
</composite:implementation>
</body>
</html>
so your page will be:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:comps="http://java.sun.com/jsf/composite/comps"
xmlns:p="http://primefaces.org/ui">
<h:head>
<!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
<h:outputScript library="js" name="deployJava.js" target="head" />
<h:form id="djForm">
<comps:deployJavaButton version="1.7.0" url="test.jnlp" rendered="#{myBean.shouldRender}" />
<p:commandButton value="update" update="djForm" />
</h:form>
</h:body>
</html>
The main idea is to avoid executing button creation script twice and more.
May be using h:panelGroup instead of h:form will help. Something like that:
<h:form id="djForm">
<h:panelGroup rendered="#{myBean.shouldRender}">
<script type="text/javascript">
deployJava.createWebStartLaunchButton(
'test.jnlp', '1.7.0');
</script>
</h:panelGroup>
<p:commandButton value="update" update="djForm" />
</h:form>
I defined a composite component (actually a few) and when I try to re-render a component inserted with I get the error mentioned:
<f:ajax> contains an unknown id ':contentFrm' - cannot locate it in the context of the component j_idt40
If I simply replace:
<et:pageContent formId="contentFrm">
with
<h:form id="contentFrm">
<div>
then everything works fine
Here is the relevant code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="styleClass" default="access-box-content alpha omega grid-12" />
<composite:attribute name="formId" default="#{cc.attrs.id}" />
</composite:interface>
<composite:implementation>
<h:form id="#{cc.attrs.formId}">
<div class="#{cc.attrs.styleClass}">
<composite:insertChildren/>
</div>
</h:form>
</composite:implementation>
</html>
This is how I use the composite
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition id="landing" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:et="http://java.sun.com/jsf/composite/components"
template="/layout/template.xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:define name="main-content">
<et:pageTitle title="#{msg.trx_lastTrx}" />
<et:tabBar formId="currentTrxFrm">
<et:tab bean="#{accountTransactionBacking}"
prompt="#{msg.trx_currentTrxs}"
reRender=":contentFrm"
tabId="1"
active="true"/>
</et:tabBar>
<et:pageContent formId="contentFrm">
<et:tabContentPanel rendered="#{accountTransactionBacking.selectedTab ==1}">
<ui:include src="/app/summary/currentTrxRG.xhtml" rendered="#{accountTransactionBacking.selectedTab ==1}"/>
</et:tabContentPanel>
</et:pageContent>
</ui:define>
</ui:composition>
TIA
Some more tests.. using same component get's the same result.. for example the following code gives similar error (even replacing render="accountSummaryLines" with render=":accountSummaryLines")..
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition id="landing" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:et="http://java.sun.com/jsf/composite/components"
template="/layout/template.xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:define name="main-content">
<et:pageTitle title="#{msg.ls_lastStatement}" />
<et:tabBar formId="acctSummTabFrm">
<et:tab/>
</et:tabBar>
<et:pageContent formId="accountButtonsFrm">
....
<et:div styleClass="accountSummaryLines" divId="lastStatementLines">
<ui:repeat var="row" value="#{lastStatementBacking.lines.data}">
<h:outputText escape="false" value="#{row}" styleClass="grid-12 lastStatementDetail"/><br></br>
</ui:repeat>
</et:div>
<et:div styleClass="access-box-footer">
<h:commandButton styleClass="left" action="#{lastStatementBacking.lines.prevPage}" value="#{msg.buttonPrevPage}" style="float:left;">
<f:ajax render="accountSummaryLines" />
</h:commandButton>
<h:commandButton styleClass="right" action="#{lastStatementBacking.lines.nextPage}" value="#{msg.buttonNextPage}">
<f:ajax render="accountSummaryLines" />
</h:commandButton>
</et:div>
</et:pageContent>
</ui:define>
</ui:composition>
The only way I got this particular example working is using render="#form" like so..
It cannot be found because the composite component is by itself a NamingContainer. The real valid client ID would be :idOfComposite:contentFrm where idOfComposite is the (auto)generated ID of the composite component itself. If you do a View Source in webbrowser and locate the <form> in question, then you'll see it.
You need to give the composite component a fixed ID
<et:pageContent id="contentFrm">
and use exactly this ID on a plain HTML element which wraps the composite's content, e.g. <div> or <span>.
<composite:implementation>
<div id="#{cc.id}">
<h:form>
<div class="#{cc.attrs.styleClass}">
<composite:insertChildren/>
</div>
</h:form>
</div>
</composite:implementation>