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;
}
Related
I have a xhtml page which has a page included through a value of a bean which is updated through ajax.
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<div class="ui-fluid">
<p:messages id="messages" showDetail="false" closable="true" />
<h:form id="form">
<p:panel id="panelInfo" header="Dados Local Instalação">
<h:outputLabel for="tipoFornecimento" value="Tipo de Fornecimento"/>
<p:selectOneMenu id="tipoFornecimento" value="#{cadastroController.localInstalacao.tipoFornecimento}">
<f:selectItems value="#{cadastroController.tiposFornecimento}"/>
</p:selectOneMenu>
<h:outputLabel for="familiaEquipamento" value="Família"/>
<p:selectOneMenu id="familiaEquipamento" value="#{cadastroController.familia}" required="true">
<f:selectItem itemLabel="Selecione"/>
<f:selectItems value="#{cadastroController.familias}"/>
<f:ajax listener="#{cadastroController.setarEquipamentoPelaFamilia}" render=":form:panelEquipamento"/>
</p:selectOneMenu>
</p:panel>
<p:panel id="panelEndereco" header="Endereço">
<ui:include src="/logradouro.xhtml"/>
</p:panel>
<p:panel id="equipamentoNa" header="Equipamento NA">
<ui:include src="/equipamentoNa.xhtml"/>
</p:panel>
<p:panel id="panelEquipamento" header="Equipamento">
<ui:include src="#{cadastroController.panelEquipamento}"/>
</p:panel>
<p:commandButton value="Salvar" actionListener="#{cadastroController.salvarLocalInstalacao}" ajax="false"/>
</h:form>
</div>
</h:body>
</html>
When I change the value of the selectOneMenu familiaEquipamento it triggers a method in the bean which instatiate a bean and adds the correspondent xhtml to the page
public void setarEquipamentoPelaFamilia() {
switch(familia) {
case AL:
localInstalacao.setEquipamento(new Alimentador());
setPanelEquipamento("alimentador.xhtml");
break;
case BF:
case CD:
case CDA:
case CDP:
case CO:
case CR:
case CT:
localInstalacao.setEquipamento(new ChaveFaca());
setPanelEquipamento("chaveFaca.xhtml");
break;
case FF:
case FP:
case FR:
case FT:
case FU:
localInstalacao.setEquipamento(new ChaveFusivel());
setPanelEquipamento("chaveFusivel.xhtml");
break;
case RG:
localInstalacao.setEquipamento(new BancoRegulador());
setPanelEquipamento("reguladorTensao.xhtml");
break;
case RL:
localInstalacao.setEquipamento(new Religador());
setPanelEquipamento("religador.xhtml");
break;
case BC:
localInstalacao.setEquipamento(new BancoCapacitor());
setPanelEquipamento("bancoCapacitor.xhtml");
break;
case TD:
case TDP:
localInstalacao.setEquipamento(new Trafo());
setPanelEquipamento("transformador.xhtml");
break;
case SL:
localInstalacao.setEquipamento(new Seccionalizador());
setPanelEquipamento("seccionalizador.xhtml");
break;
}
localInstalacao.getEquipamento().setFamilia(familia);
}
I.E. I choose the familia 'AL', so it sets the equipamento to new Alimentador() and returns the page 'alimentador.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<p:outputLabel for="fasesEquipamento" value="Qtd Fases: " />
<p:selectOneMenu id="fasesEquipamento" value="#{cadastroController.localInstalacao.equipamento.fases}">
<f:selectItems value="#{cadastroController.fases}"/>
</p:selectOneMenu>
<p:outputLabel for="nrAlimentador" value="Número Alimentador: " />
<p:inputMask mask="9?9" id="nrAlimentador" value="#{cadastroController.localInstalacao.equipamento.nrAlimentador}"/>
<p:outputLabel for="nrEquipamento" value="Número Equipamento: " />
<p:inputMask mask="9?9999" id="nrEquipamento" value="#{cadastroController.localInstalacao.equipamento.nrEquipamento}"/>
<p:outputLabel for="nrEquipamentoAnterior" value="Número Equipamento Anterior: " />
<p:inputMask mask="9?9999" id="nrEquipamentoAnterior" value="#{cadastroController.localInstalacao.equipamento.nrEquipamentoAnterior}"/>
<p:outputLabel for="nrSubestacao" value="Número Subestação: " />
<p:inputMask mask="9?99" id="nrSubestacao" value="#{cadastroController.localInstalacao.equipamento.nrSubestacao}"/>
<p:outputLabel for="potencia" value="Potencia: " />
<p:inputMask mask="9?99.9" id="potencia" value="#{cadastroController.localInstalacao.equipamento.potencia}"/>
<p:outputLabel for="regionalEquipamento" value="Regional: " />
<p:selectOneMenu id="regionalEquipamento" value="#{cadastroController.localInstalacao.equipamento.regional}">
<f:selectItems value="#{cadastroController.regionais}"/>
</p:selectOneMenu>
</ui:composition>
I'm using a ViewScoped ManagedBean, but after submitting the form, the values which were added through ajax in the 'alimentador.xhtml' are not binded to the bean localInstalacao
Any ideas?
Never mind, I managed to fix it by upgrading to Mojarra 2.2
It seems like a known bug described on JAVASERVERFACES - 1492
To upgrade the version of Mojarra in JBOSS AS 7.1 follow these steps Upgrading Mojarra
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 am new here :)
I have got a problem with one of my first web-apps written using JSF.
I wrote a simple template, it looks like this:
<?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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<h:form id="contentForm">
<ui:insert name="content"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
And in another file (obrazek.xhtml) I wrote this code:
<?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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:form id="PHOTOS">
<p:panelGrid columns="2">
<h:commandLink action="#{pic.addValue1}">
<p:graphicImage url="resources/images/1.png">
<p:ajax update="wynik1" event="click"/>
</p:graphicImage>
</h:commandLink>
<h:commandLink action="#{pic.addValue2}">
<p:graphicImage url="resources/images/2.png">
<p:ajax update="wynik1" event="click"/>
</p:graphicImage>
</h:commandLink>
<h:outputText value="Obrazek 1: #{pic.val1}" id="wynik1"/>
<h:outputText value="Obrazek 2: #{pic.val2}" id="wynik2"/>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
I wanted to insert some code into "content" primefaces layoutUnit.
IDEA: It has to be 2 pictures and if I click on one of them, AJAX should show the value from ManagedBean using h:outputText. (it always adds +1 to the value :))
The problem is: if I dont add templating** into obrazek.xhtml everything works fine, but if I add:
<ui:composition template="template.xhtml">
<ui:define name="content">
CODE FROM FORM "PHOTOS" (the one about I called upper that "is no templated"**)
</ui:define>
</ui:composition>
while I am clicking on some picture nothing happens. Just "#" is added to my URL and it looks like that:
http://localhost:8080/obrazek.xhtml#
And my ManagedBean also:
#ManagedBean(name = "pic", eager = true)
#SessionScoped
public class PictureBean {
private int val1;
private int val2;
public void addValue1(){
val1 += 1;
}
public void addValue2(){
val2 += 1;
}
GETTERS AND SETTERS FOR VAL1 VAL2
}
I have rummaged all the web looking for the answer but uselessly.
Could anyone here help me? :)
Pardon for so long post and not coloured syntax, have to figure out "how to" do it, first :D
I use JSF in implementation MyFaces 2.0
I have 2 jsf pages login.xhtml and register.xhtml.
login.xhtml:
<?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: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>
<title>System CollDoc</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="username" value="Login:"/>
<h:inputText id="username" value="#{userManager.userName}" required="true" requiredMessage="#{msg.requiredLoginMsg}">
<f:ajax event="blur" render="usernameMessage"/>
</h:inputText>
<h:message id="usernameMessage" for="username" />
<h:outputLabel for="password" value="#{msg.password}"/>
<h:inputSecret id="password" value="#{userManager.password}" required="true" requiredMessage="#{msg.requiredPassMsg}">
<f:ajax event="blur" render="passwordMessage" />
</h:inputSecret>
<h:message id="passwordMessage" for="password" />
<h:commandButton value="#{msg.login}" action="#{userManager.login}"/>
</h:panelGrid>
</h:form>
<h:messages id="messages" globalOnly="true"/>
<h:link value="#{msg.register}" outcome="register.xhtml"/>
</h:body>
</html>
register.xhtml:
<?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: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>
<title>System CollDoc</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="login" value="Login:"/>
<h:inputText id="login" value="#{registerBacking.registerLog}" required="true" requiredMessage="#{msg.requiredLoginMsg}">
<f:ajax event="blur" render="usernameMessage"/>
</h:inputText>
<h:message id="usernameMessage" for="login"/>
<h:outputLabel for="pass" value="#{msg.password}"/>
<h:inputSecret id="pass" value="#{registerBacking.registerPass}" required="true" requiredMessage="#{msg.requiredPassMsg}">
<f:ajax event="blur" render="passwordMessage" />
</h:inputSecret>
<h:message id="passwordMessage" for="pass" />
<h:commandButton value="#{msg.login}" action="#{registerBacking.register}"/>
</h:panelGrid>
</h:form>
<h:link class="link" value="#{msg.returnTxt}" outcome="/pages/login.xhtml"/>
</h:body>
</html>
I run my application and first i see login.xhtml page. I click at first inputText "username" and next at inputSecret "password" (validation for "username" is run by ajax request on blur), next at link to register page (validation for "password" is run by ajax request on blur) and i get dialog with error:
Error Message: Request failed with status 0 and reason
--------------------------------------------------------
Calling function:myfaces._impl.xhrCore._AjaxRequest
Error Name: httpError
--------------------------------------------------------
Note, this message is only sent, because project stage is development and no other error listeners are registered.
I click "ok" button and i get register.xhtml page in my web browser. At register page situation is same: I click at inputText "login", next at inputSecret "pass" (validation for "login" is run by ajax request on blur) next i click link back to login page or button to run business logic (validation for "pass" is run by ajax request on blur) and i get same error
What does error mean? What is wrong?
Edit:
I run my application again now and i don't get any error message. Why do I get this error only sometimes?
It is a result of mixing AJAX and 'regular' requests. When the button is hit two requests run in parallel: one - AJAX request for validation on blur, and second - form submit of commandButton.
JSF detects it when AJAX request is completed and reports it as a potential problem (e.g. if both requests did some actions on server side which were inter-dependent).
Probably simplest way to fix it in your case is to make the button do AJAX request as well (add f:ajax to the h:commandButton), then JSF will put the request to the queue what will guarantee that requests are made serially but not concurrently.
I have spring integrated with JSF and I am facing a strange behavior:
I hit the command button the action method in the managed bean is hit successfully (I removed it in the below example).
The Ajax update works perfect and the form is updated.
I hit another button the action method now in the managed bean isn't hit.
The panel is restored to the initial view and it freezes on this view.
I can't get the form updated except if I refresh the page and these steps are repeated.
DealerInfo.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/templates/default.xhtml">
<ui:define name="content">
<h:form id="toolBarForm">
<p:toolbar style="margin-bottom:5px;">
<p:toolbarGroup align="right">
<p:commandButton value="Add"
update=":toolBarForm" icon="ui-icon-plusthick" />
</p:toolbarGroup>
</p:toolbar>
<p:messages id="dealerInfoMessages" />
<ui:include src="/pages/dealers/DealerMainInfo.xhtml" />
</h:form>
</ui:define>
</ui:composition>
</html>
pages/dealers/DealerMainInfo.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<p:panel id="dealerMainInfoPanel" header="Dealer Main Info"
style="margin-bottom:5px;">
<h:panelGrid columns="2">
<p:outputLabel for="dealerCode" value="Dealer Code" />
<p:inputText id="dealerCode" required="true"
value="#{dealerMainInfoBO.dealerCode}" style="width:200px;" />
<p:outputLabel for="dealerName" value="Dealer Name" />
<p:inputText id="dealerName" required="true"
value="#{dealerMainInfoBO.dealerName}" style="width:200px;" />
</h:panelGrid>
</p:panel>
</ui:composition>
</html>
Update:
I created a very simple single page and I noticed that when I remove the <h:head></h:head> tags the ajax works like a charm BUT without the fancy primefaces UI, and when I add the tags the ajax stop (this is normal cause <h:head></h:head> tags fetch all the needed JSs and CSSs), What Can I Do?
Example.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<h:form id="toolBarForm">
<p:toolbar style="margin-bottom:5px;">
<p:toolbarGroup align="right">
<p:commandButton value="Add" update=":toolBarForm"
action="#{bean.add}" />
</p:toolbarGroup>
</p:toolbar>
<p:messages id="operationDefinitionMessages" />
<h:panelGrid columns="2">
<p:outputLabel for="text" value="Text" />
<p:inputText id="text" required="true" value="#{bean.text}" />
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
My Environment
Primefaces:3.5
JSF-Mojarra:2.2
Spring:3.2.3.RELEASE
In case anyone faces the same issue. I noticed that the Primefaces showcase is using JSF-Mojarra-2.1.22. I downgraded my JSF-Mojarra version from 2.2 to 2.1.22 and it worked like a charm.
If I am not wrong, I guess it should be reported to primefaces (if it isn't a current issue).