We have complex JSF page composed of repeatable primefaces components like p:dataTable, p:tabView, ui:repeat, c:foreach, javascript, etc.
The page consists of two separate forms with ids formHeader and formBPM
What is strange, execution of h:commandButton, which is placed in form formHeader, results in calling all getter, render and test expressions in form formBPM. Expressions are called both in RestoreView and RenderResponse phases.
<h:form id="formHeader" enctype="multipart/form-data;charset=UTF-8">
<h:commandButton value="Call this" type="button">
<f:ajax execute="#this" />
</h:commandButton>
</h:form>
<h:form id="formBpm">
<p:tabView...>
<p:dataTable....>
</p:dataTable>
....
</p:tabView>
</h:form>
Original page is too complex and is overloaded by dynamic components and java scripts.
But I have modeled the above page in simplified structure and checked logging
<h:form id="formHeader" enctype="multipart/form-data;charset=UTF-8">
<h:commandButton value="Call this" type="button">
<f:ajax execute="#this" />
</h:commandButton>
<h:commandButton value="Call form render form" type="button">
<f:ajax execute="#form" render="#form"/>
</h:commandButton>
<h:commandButton value="Call formBpm" type="button">
<f:ajax execute=":formBpm"/>
</h:commandButton>
<h:commandButton value="Call formBpm render formBpm" type="button">
<f:ajax execute=":formBpm" render=":formBpm"/>
</h:commandButton>
<p:outputLabel id="labelThisid" value="#{testBean.varThis}"></p:outputLabel>
</h:form>
<h:form id="formBpm">
<p:outputLabel id="labelid" value="#{testBean.var1}"></p:outputLabel>
<p:tabView id="tabViewId" >
<p:tab id="tabId1" title="#{testBean.tab1}">
</p:tab>
<p:tab id="tabId2" title="#{testBean.tab2}" rendered="#{testBean.tab2Show}">
</p:tab>
</p:tabView>
</h:form>
According to log, on simplified page no getters are executed on "Call this" click, they are executed only if appropriate form is rendered, not executed. Moreover, getters are called only on RenderResponse phase.
What may be the reason of inappropriate getters calling on original complex page?
Primefaces 6.1
jBoss EAP 6.4
JSF Mojarra 2.1.28
The solution is that expressions in jstl tags are executed regardless of execution container of clicked commandButton. In our original page the same expressions were used sometimes both as value getters and in test expressions of jstl tags. So, in below code expression #{testBean.tab2Show} is executed when button "Call this" is clicked. Besides, test expressions are called twice in RestoreView and in RenderResponse phases.
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h2>Check jstl with AJAX </h2>
</h:head>
<h:body>
<h:form id="formHeader" enctype="multipart/form-data;charset=UTF-8">
<h:commandButton value="Call this">
<f:ajax execute="#this" />
</h:commandButton>
<p:outputLabel id="labelThisid" value="#{testBean.varThis}"></p:outputLabel>
</h:form>
<h:form id="formBpm">
<c:if test="#{testBean.tab2Show}">
<p:outputLabel id="labelid" value="#{testBean.var1}"></p:outputLabel>
</c:if>
<p:tabView id="tabViewId" >
<p:tab id="tabId1" title="#{testBean.tab1}">
</p:tab>
<p:tab id="tabId2" title="#{testBean.tab2}">
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
TestBean
public String getVar1() {
log.debug("getVar1");
return "getVar1";
}
public String getVarThis() {
log.debug("getVarThis");
return "getVarThis";
}
public String getTab1() {
log.debug("getTab1");
return "getTab1";
}
public String getTab2() {
log.debug("getTab2");
return "getTab2";
}
public boolean isTab2Show() {
log.debug("isTab2Show");
return true;
}
PhaseListener log on clicking button "Call this"
18:30:27,298 DEBUG [utils.LifeCycleListener:26] - START PHASE RESTORE_VIEW 1
18:30:27,300 DEBUG [utils.TestBean:48] - isTab2Show
18:30:27,300 DEBUG [utils.LifeCycleListener:30] - END PHASE RESTORE_VIEW 1
18:30:27,301 DEBUG [utils.LifeCycleListener:26] - START PHASE APPLY_REQUEST_VALUES 2
18:30:27,302 DEBUG [utils.LifeCycleListener:30] - END PHASE APPLY_REQUEST_VALUES 2
18:30:27,303 DEBUG [utils.LifeCycleListener:26] - START PHASE PROCESS_VALIDATIONS 3
18:30:27,303 DEBUG [utils.LifeCycleListener:30] - END PHASE PROCESS_VALIDATIONS 3
18:30:27,303 DEBUG [utils.LifeCycleListener:26] - START PHASE UPDATE_MODEL_VALUES 4
18:30:27,303 DEBUG [utils.LifeCycleListener:30] - END PHASE UPDATE_MODEL_VALUES 4
18:30:27,303 DEBUG [utils.LifeCycleListener:24] - START INVOKE_APPLICATION
18:30:27,303 DEBUG [utils.LifeCycleListener:26] - START PHASE INVOKE_APPLICATION 5
18:30:27,303 DEBUG [utils.LifeCycleListener:30] - END PHASE INVOKE_APPLICATION 5
18:30:27,303 DEBUG [utils.LifeCycleListener:26] - START PHASE RENDER_RESPONSE 6
18:30:27,303 DEBUG [utils.TestBean:48] - isTab2Show
18:30:27,304 DEBUG [utils.LifeCycleListener:30] - END PHASE RENDER_RESPONSE 6
Related
Let's take the following example:
The composite component is as follows:
<?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:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<!-- INTERFACE -->
<cc:interface>
<cc:clientBehavior name="click" targets="button" event="click"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<span id="#{cc.clientId}">
<h:commandButton id="button" value="Press me">
<f:ajax event="click" listener="#{bean.helloFromComposite()}"/>
</h:commandButton>
</span>
</cc:implementation>
</html>
And the using page is as follows:
<h:form id="form">
<my:button id="my-button">
<f:ajax event="click" listener="#{bean.HelloFromPage()}"/>
</my:button>
</h:form>
Then, when I click on the button the bean logs:
Hello from composite
Hello from page
Hello from composite
Hello from page
Reproduced on Glassfish 4.1.1 with Omnifaces 2.5.1 and Primefaces 6.0.
If I change my using page as follows, then the problem disappears:
<h:form id="form">
<my:button id="my-button">
<f:ajax event="click" listener="#{bean.HelloFromPage()}" execute="#none"/>
</my:button>
</h:form>
When I click on the button the bean now logs:
Hello from composite
Hello from page
I have two questions:
Is it a known behavior?
Is the sequence "Hello from composite", "Hello from page" by design? It's fine by me, as in my opinion the ajax behavior inside the composite is more specific (and should be executed first) than the ajax behavior specified in the using page.
Edit:
I can reproduce the problem in a very simple way, as follows:
<h:form>
<h:commandButton>
<f:ajax event="click" listener="#{bean.helloOne()}"/>
<f:ajax event="click" listener="#{bean.helloTwo()}"/>
</h:commandButton>
</h:form>
Solved by adding an execute #none attribute in the second AJAX call:
<h:form>
<h:commandButton>
<f:ajax event="click" listener="#{bean.helloOne()}"/>
<f:ajax event="click" listener="#{bean.helloTwo()}" execute="#none"/>
</h:commandButton>
</h:form>
Could there be a confusion between the button is 'clicked' and the button is 'executed'?
I have page with an initial search/h:datatable on top. It renders well and displays all the text units (tokens) which are available.
Leading each row of the search results with a button "view". This button rerenders the panel group textUnitGroup, which holds the details of this token. Now, that works just fine. I can click all the token's view button and the area is refreshed WITHOUT a page reload. With the input fields of that panel group (form in embeded) I can also persist new tokens. Works, too.
However, if I load token details into that detail form (form is rendered again), and I press the "save text" button, JSF phase 2, 3, 4 and 5 are skipped (which did not happen, when I save a new token and the "view" button has NOT been clicked before).
12:31:44,174 INFO [org.exadel.helper] (default task-22) L:54 BEFORE RESTORE_VIEW 1
12:31:44,180 INFO [org.exadel.helper] (default task-22) L:67 AFTER RESTORE_VIEW 1
12:31:44,181 INFO [org.exadel.helper] (default task-22) L:54 BEFORE RENDER_RESPONSE 6
12:31:44,257 INFO [org.exadel.helper] (default task-22) L:67 AFTER RENDER_RESPONSE 6
Somewhat changes when re-rendering the details form resp. panel group. But I don't understand why. There is NO error in the log. But it is certainly the cause of the JSF phase-skipping (otherwise the insertion of a new token would not work, too).
This is the xhtml file. Let me know if you need more.
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:mywidgets="http://java.sun.com/jsf/composite/widgets"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<ui:composition template="/templates/overviewTemplate.xhtml">
<!-- <ui:composition template="/templates/contentTemplate.xhtml"> -->
<ui:define name="title">Text Administration</ui:define>
<ui:define name="body">
<h1>Text Administration</h1>
<h:panelGroup layout="block" id="searchListGroup" rendered="true">
<h:form id="listOfTextUnits">
<h:inputText autocomplete="true" style="width: 300px"
value="#{textController.searchFilter}"
pt:placeholder="Token or text in English" pt:autofocus="true"
title="Search by token or text in English">
<f:ajax event="keyup" execute="#this" render="textTable" />
</h:inputText>
<p class="betweenSections" />
<h:dataTable id="textTable"
value="#{textController.findTextUnitsByString()}" var="textUnit"
styleClass="data-table" headerClass="table-header"
rowClasses="table-odd-row,table-even-row">
<h:column>
<!-- column header -->
<f:facet name="header">Action</f:facet>
<!-- row record -->
<h:commandButton value="view" styleClass="mini"
action="#{textController.loadTextDetail()}">
<f:param name="id" value="#{textUnit.id}" />
<f:ajax execute="#form" render="textUnitGroup" />
</h:commandButton>
</h:column>
<h:column sortBy="#{textUnit.token}"
filterExpression="#{empty filterValue or fn:startsWith(textUnit.token, filterValue)}"
filterValue="#{textController.searchFilter}">
<f:facet name="header">Token</f:facet>
<h:outputText value="#{textUnit.token}" />
</h:column>
<h:column>
<!-- column header -->
<f:facet name="header">Default Text</f:facet>
<!-- row record -->
#{textUnit.defaultText}
</h:column>
</h:dataTable>
</h:form>
</h:panelGroup>
<h:panelGroup layout="block" id="textUnitGroup"
rendered="true">
<h2>Text unit</h2>
<h:form id="textUnit">
<h:inputHidden id="id" value="#{textController.id}" />
<label for="token">Token</label>
<h:inputText id="token" value="#{textController.token}"
required="true"
requiredMessage="Please insert a token string for this new translation." />
<label for="text">Default Text</label>
<h:inputTextarea id="text" value="#{textController.text}"
required="true"
requiredMessage="Please insert a default text translation."
cols="100" />
<h:commandButton value="save text"
action="#{textController.saveText()}">
<f:ajax execute="#form" render="searchListGroup" />
</h:commandButton>
</h:form>
</h:panelGroup>
<p class="betweenSections" />
</ui:define>
</ui:composition>
</html>
Thanks for any hint
--------------------------------UPDATE-------------------------------
Assuming that something with the JavaScript code has gone broken, I did put the h:panelGroup within the h:form tags. Now that works. The drawback with this is, that the h2 tags is never rerendered erspectively shown. This is what I wanted in the next step. Hide the form and then display, when needed.
To properly rephrase the question: How could one re-render a panelgroup which contains multiple h:form whitout listing all the forms in the render attribute of the f:ajax tag? Not possible at all?
Thanks for any hint!
I have the following problem:
I have a button that should invoke a method, but the page should't get refreshed (I display a dialog based on bootstrap modal after clicking on the button and it vanishes otherwise). Therefore I use ajax to say that nothing should get rendered after clicking on the button.
I already used applied it before and it worked. But in the recent version of my code the method isn't invoked anymore as long as I use ajax. If I remove the ajax part the method is invoked as it should be, but the page gets refreshed and I don't want that.
My code:
<h:form>
<ui:fragment rendered="#{bean.condition1}">
<ui:include src="facelet1.xhtml" />
</ui:fragment>
<ui:fragment rendered="#{bean.condition2}">
<ui:include src="facelet2.xhtml" />
</ui:fragment>
<h:commandButton value="Save" action="bean.method">
<f:ajax execute="#form" render="#none"/>
</h:commandButton>
<h:form>
Before I had it like this and it worked:
<h:form>
<ui:include src="bean.faceletPath" />
<h:commandButton value="Save" action="bean.method">
<f:ajax execute="#form" render="#none"/>
</h:commandButton>
<h:form>
Thanks all,
/metalhamster
Edit:
facelet1.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:f="http://java.sun.com/jsf/core">
<h:body>
<ui:composition>
<h:panelGrid columns="2">
<h:outputText value="Name:">
<h:inputText value="bean.name">
<h:outputText value="Value:">
<h:inputText value="bean.value">
</h:panelGrid>
</ui:composition>
</h:body>
</html>
facelet2.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:f="http://java.sun.com/jsf/core">
<h:body>
<ui:composition>
<h:panelGrid columns="2">
<h:outputText value="Name:">
<h:inputText value="bean.name">
<h:outputText value="Text:">
<h:inputText value="bean.text">
</h:panelGrid>
</ui:composition>
</h:body>
</html>
I am invoking a popup from one form. That popup has another form. The popup shows but there is a select box inside the popup which is not working as expected. If the values in the select box are populated dynamically from the backing bean, the value change event is not called for those values. The event is only called for the hard coded <selectItem />. See sample code below, so for only itemLabel="1" and itemLabel="2" the fBean.onChange method is called.
The lifecycle phases are not complete for dynamic select items value changes:
First time following are the phases:
START PHASE RESTORE_VIEW 1
END PHASE RESTORE_VIEW 1
START PHASE RENDER_RESPONSE 6
END PHASE RENDER_RESPONSE 6
Next time onwards following phases are also added in the middle:
START PHASE APPLY_REQUEST_VALUES 2
END PHASE APPLY_REQUEST_VALUES 2
START PHASE PROCESS_VALIDATIONS 3
END PHASE PROCESS_VALIDATIONS 3
I tried <a4j:log />, <h:messages />, went through the http post but no clue why is this happening. Will appreciate any help. Thanks
<h:form id="aForm">
<a4j:outputPanel>
<a4j:commandLink value="show" actionListener="#{aBean.onClick}"
limitRender="true" render=":fForm"
oncomplete="#rich:component('fModalPanel')}.show();"/>
</a4j:outputPanel>
</h:form>
<ui:include src="fPopup.xhtml"/>
<!-- Contents of fPopup.xhtml -->
<rich:popupPanel id="fModalPanel" ...>
<h:form id="fForm">
<h:selectOneMenu value="#{fBean.selected}">
<f:selectItems value="#{fBean.selectItems"/>
<f:selectItem itemLabel="1" itemValue="1"/>
<f:selectItem itemLabel="2" itemValue="2" />
<a4j:ajax event="valueChange"
execute="#this" render="fSubPnl"
limitRender="true"
listener="#{fBean.onChange}"/>
</h:selectOneMenu>
<rich:panel id="fSubPnl">
<h:outputText value="#{fBean.selected}" />
</rich:panel>
</h:form>
</rich:popupPanel>
Jsf is complex, moved to Angularjs
I got a strange behaviour on dynamicly included page
My first page has a combo to choose from different pages to include :
<h:panelGrid columns="2">
<h:outputLabel value="Choose your page to include" />
<h:selectOneMenu id="pageList" value="#{anyPageBean.page}">
<f:selectItems value="#{anyPageBean.pageList}" var="w" itemValue="#{w}" itemLabel="#{w}" />
</h:selectOneMenu>
</h:panelGrid>
The AnyPageBean just gives back one of the 2 following pages : pilotNoTemplate.xhtml or pipo.xhtml
#ManagedBean
#SessionScoped
public class AnyPageBean {
private String page;
private java.util.List<String> pageList;
public AnyPageBean() {
super();
pageList = new ArrayList<String>();
pageList.add("pilotNoTemplate.xhtml");
pageList.add("pipo.xhtml");
}
The pilotNoTemplate.xhtml appears correctly when i choose that page (the pipo page also).
But when i submit the form from pilotNoTemplate.xhtml, JSF considers that submit as a POST which is OK,
but only Phase1 and Phase 6 are spanned, WHY ?
I have a PhaseListener showing the Phases, it prints :
INFO IN pour /jsf2-todo-001-dynamic-page-include-v2/any.faces ¤¤¤¤¤ POST
INFO AJAX BEFORE RESTORE_VIEW 1 for viewId=null
INFO AJAX AFTER RESTORE_VIEW 1 for viewId=/any.xhtml
INFO AJAX BEFORE RENDER_RESPONSE 6 for viewId=/any.xhtml
INFO AJAX AFTER RENDER_RESPONSE 6 for viewId=/any.xhtml
If anything was filled in the form, it gets resetted ...
the SECOND submit is all right, all the phase are spanned :
INFO IN pour /jsf2-todo-001-dynamic-page-include-v2/any.faces ¤¤¤¤¤ POST
INFO AJAX BEFORE RESTORE_VIEW 1 for viewId=null
INFO AJAX AFTER RESTORE_VIEW 1 for viewId=/any.xhtml
INFO AJAX BEFORE APPLY_REQUEST_VALUES 2 for viewId=/any.xhtml
INFO AJAX AFTER APPLY_REQUEST_VALUES 2 for viewId=/any.xhtml
INFO AJAX BEFORE PROCESS_VALIDATIONS 3 for viewId=/any.xhtml
INFO AJAX AFTER PROCESS_VALIDATIONS 3 for viewId=/any.xhtml
INFO AJAX BEFORE UPDATE_MODEL_VALUES 4 for viewId=/any.xhtml
INFO AJAX AFTER UPDATE_MODEL_VALUES 4 for viewId=/any.xhtml
INFO AJAX BEFORE INVOKE_APPLICATION 5 for viewId=/any.xhtml
INFO AJAX AFTER INVOKE_APPLICATION 5 for viewId=/any.xhtml
INFO AJAX BEFORE RENDER_RESPONSE 6 for viewId=/any.xhtml
INFO AJAX AFTER RENDER_RESPONSE 6 for viewId=/any.xhtml
My template page :
<!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:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<div>
<h:panelGroup id="globalMessages">
<h:messages globalOnly="false" styleClass="messages" />
</h:panelGroup>
<ui:insert name="content" />
</div>
</h:body>
</html>
the composition page, enabling to choose a page to include :
<!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:f="http://java.sun.com/jsf/core" >
<ui:composition template="/layout/template.xhtml">
<ui:define name="content">
<h:form id="chooseForm">
<h:panelGrid columns="2">
<h:outputLabel value="Choose your page to include" />
<h:selectOneMenu id="pageList" value="#{anyPageBean.page}">
<f:selectItems value="#{anyPageBean.pageList}" var="w" itemValue="#{w}" itemLabel="#{w}" />
</h:selectOneMenu>
</h:panelGrid>
<h:commandButton id="show" value="Show page">
<f:ajax event="click" execute="#form" render=":panelForDynaPage :globalMessages" />
</h:commandButton>
</h:form>
<h:panelGroup id="panelForDynaPage">
<ui:include id="includeContenu" src="#{anyPageBean.page}" />
</h:panelGroup>
</ui:define>
</ui:composition>
</html>
the pilotNoTemplate.xhtml page :
<?xml version="1.0" encoding="UTF-8"?>
<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:f="http://java.sun.com/jsf/core">
<f:metadata>
<f:viewParam id="b" name="id" value="#{pilotAction.id}" />
</f:metadata>
<f:event id="a" listener="#{pilotAction.prepare}" type="preRenderView" />
<h:form id="formPilot">
<h:panelGrid columns="2">
<h:outputLabel value="#{appMsg['pilot.firstname']}" />
<h:inputText id="firstname" label="#{appMsg['pilot.firstname']}" value="#{pilotHolder.pilot.firstname}"
required="true" />
<h:outputLabel value="#{appMsg['pilot.lastname']}" />
<h:inputText id="lastname" label="#{appMsg['pilot.lastname']}" value="#{pilotHolder.pilot.lastname}" />
<h:outputLabel value="#{appMsg['pilot.age']}" />
<h:inputText id="age" label="#{appMsg['pilot.age']}" value="#{pilotHolder.pilot.age}" required="true"
validator="#{pilotAction.validateAge}" />
</h:panelGrid>
<h:commandButton id="merge" action="#{pilotAction.doMerge}"
value="#{pilotHolder.pilot.id ne null ? appMsg['pilot.update'] : appMsg['pilot.create']}">
<f:ajax id="ajaxm" event="click" execute="#form" render=":panelForDynaPage :globalMessages" />
</h:commandButton>
</h:form>
</ui:composition>
I paid attention to gives "id" to every component in the xhtml page,
since there are that kind of problems without it, is seems to be unsuffient in my case.
any idea ?
I 've seen others having the same problem, did you find any solution ?
This is caused by JSF spec issue 790, a bug which occurs in JSF 2.0/2.1 and is fixed in the upcoming JSF 2.2. Basically, when JSF ajax updates outside the current <h:form> a component which in turn contains another <h:form> component as child, then its view state won't be updated (this is an oversight). It would only be updated when you explicitly specify the form component in the ajax update. You could theoretically solve it by replacing <h:panelGroup id="panelForDynaPage"> by a <h:form id="panelForDynaPage">, but this is technically the wrong markup.
You can use the following JS to fix this bug. This script will create the javax.faces.ViewState hidden field for forms which did not retrieve any view state after ajax update.
var ie = /*#cc_on!#*/false;
jsf.ajax.addOnEvent(function(data) {
if (data.status == "success") {
var viewState = document.getElementsByName("javax.faces.ViewState")[0].value;
for (var i = 0; i < document.forms.length; i++) {
var form = document.forms[i];
if (!hasViewState(form)) {
var hidden = document.createElement(ie ? "<input name='javax.faces.ViewState'>" : "input");
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", "javax.faces.ViewState");
hidden.setAttribute("value", viewState);
hidden.setAttribute("autocomplete", "off");
form.appendChild(hidden);
}
}
}
});
function hasViewState(form) {
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].name == "javax.faces.ViewState") {
return true;
}
}
return false;
}