Used this StackOverflow answer to try an implement a submitless form. The page consists of a selectomenu control and a table. On change of the selection I wish to refresh the table body. The page loads without issues, but when the selection is made I get the following error occurs:
10:22:48,241 ERROR [[FacesServlet]] Servlet.service() for servlet FacesServlet threw exception: java.lang.NullPointerException
at com.sun.faces.context.PartialViewContextImpl.createPartialResponseWriter(PartialViewContextImpl.java:441) [jsf-impl-2.1.7-jbossorg-2.jar:]
at com.sun.faces.context.PartialViewContextImpl.access$300(PartialViewContextImpl.java:71) [jsf-impl-2.1.7-jbossorg-2.jar:]
at com.sun.faces.context.PartialViewContextImpl$DelayedInitPartialResponseWriter.getWrapped(PartialViewContextImpl.java:582) [jsf-impl-2.1.7-jbossorg-2.jar:]
at javax.faces.context.PartialResponseWriter.startDocument(PartialResponseWriter.java:115) [jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final]
at com.sun.faces.context.AjaxExceptionHandlerImpl.handlePartialResponseError(AjaxExceptionHandlerImpl.java:199) [jsf-impl-2.1.7-jbossorg-2.jar:]
at com.sun.faces.context.AjaxExceptionHandlerImpl.handle(AjaxExceptionHandlerImpl.java:123) [jsf-impl-2.1.7-jbossorg-2.jar:]
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:119) [jsf-impl-2.1.7-jbossorg-2.jar:]
at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:116) [jsf-impl-2.1.7-jbossorg-2.jar:]
at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118) [jsf-impl-2.1.7-jbossorg-2.jar:]
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:593) [jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final]
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:329) [jbossweb-7.0.13.Final.jar:]
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:248) [jbossweb-7.0.13.Final.jar:]
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:275) [jbossweb-7.0.13.Final.jar:]
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:161) [jbossweb-7.0.13.Final.jar:]
at org.jboss.as.jpa.interceptor.WebNonTxEmCloserValve.invoke(WebNonTxEmCloserValve.java:50) [jboss-as-jpa-7.1.1.Final.jar:7.1.1.Final]
at org.jboss.as.web.security.SecurityContextAssociationValve.invoke(SecurityContextAssociationValve.java:153) [jboss-as-web-7.1.1.Final.jar:7.1.1.Final]
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:155) [jbossweb-7.0.13.Final.jar:]
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102) [jbossweb-7.0.13.Final.jar:]
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109) [jbossweb-7.0.13.Final.jar:]
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:368) [jbossweb-7.0.13.Final.jar:]
at org.apache.coyote.ajp.AjpProcessor.process(AjpProcessor.java:505) [jbossweb-7.0.13.Final.jar:]
at org.apache.coyote.ajp.AjpProtocol$AjpConnectionHandler.process(AjpProtocol.java:445) [jbossweb-7.0.13.Final.jar:]
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:930) [jbossweb-7.0.13.Final.jar:]
at java.lang.Thread.run(Thread.java:636) [rt.jar:1.6.0_18]
I'm using JBoss-AS-7.1.1, and the selectonmenu looks like this:
<h:selectOneMenu id="ship"
value="#{shipManager.current}">
<f:selectItems value="#{shipManager.list}"
var="ship"
itemValue="#{ship}"
itemLabel="#{ship.name}" />
<f:ajax listener="#{shipManager.changeShip}" />
</h:selectOneMenu>
If I remove the ajax component then no issues although (of course) the shipManager is not updated.
Once I have the selection made I would then like to add the renderer part to refresh my table body.
Many thanks for any help given.
Steve
As requested here is my XHTML 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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Voyage Cruises</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" rel="stylesheet" media="all" href="/css/screen.css"/>
<link type="text/css" rel="stylesheet" media="all" href="/css/cruise.css"/>
<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
<script src="js/map.js" ></script>
<script src="js/cruise.js" ></script>
</h:head>
<h:body>
<div id="page">
<div id="float-map">
<div id="map"></div>
</div>
<h:form id="ship-form">
<div id="ship-controls">
<div class="float-ctrls">
<img src="/images/action_search.png" alt="Find Ports"/>
</div>
<div>
<span id="ship-selector" >
<h:selectOneMenu id="ship"
value="#{shipManager.current}">
<f:selectItems value="#{shipManager.list}"
var="ship"
itemValue="#{ship}"
itemLabel="#{ship.name}" />
<f:ajax execute="ship" render="#form" listener="#{shipManager.changeShip}" />
</h:selectOneMenu>
</span>
<select id="month" />
<select id="year" />
<br />
<span class="input-container"><b>Tonnage:</b><input id="tonnage" type="text" size="6" value="30,277" /></span>
<span class="input-container"><b>Audit Time:</b><input id="audit" type="text" size="2" value="6" /></span>
<span class="input-container"><b>Fleet:</b><input id="fleet" type="text" size="20" value="P&O" /></span>
</div>
</div>
<table class="cruise">
<thead>
<tr>
<th class="date">Date</th>
<th class="port">Port</th>
<th class="arrive">Arrive</th>
<th class="depart">Depart</th>
</tr>
</thead>
<tbody>
<ui:repeat var="cruise"
value="#{cruiseManager.list}"
varStatus="table">
<tr class="#{table.even ? 'even' : 'odd'}">
<td class="date">
<h:outputFormat value="{0, date,d MMM}">
<f:param value="#{cruise.date}" />
</h:outputFormat>
</td>
<h:panelGroup rendered="#{null != cruise.port}">
<td class="port">#{cruise.port.name}</td>
<td class="arrive">
<h:outputFormat rendered="#{null != cruise.arrival}"
styleClass="#{cruise.arrivalEstimated ? 'est-time' : 'act-time'}"
value="{0, date,HH:mm}">
<f:param value="#{cruise.arrival}" />
</h:outputFormat>
</td>
<td class="depart">
<h:outputFormat rendered="#{null != cruise.departure}"
styleClass="#{cruise.departureEstimated ? 'est-time' : 'act-time'}"
value="{0, date,HH:mm}">
<f:param value="#{cruise.departure}" />
</h:outputFormat>
</td>
</h:panelGroup>
<h:panelGroup rendered="#{null == cruise.port}">
<td class="at-sea" colspan="3">At Sea</td>
</h:panelGroup>
</tr>
</ui:repeat>
</tbody>
</table>
</h:form>
</div>
</h:body>
</html>
And the ShipManager:
package com.nutrastat.voyager.web;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.AjaxBehaviorEvent;
import com.nutrastat.voyager.db.HarbourMasterLocal;
import com.nutrastat.voyager.db.ShipEntity;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
#ManagedBean
#ViewScoped
public class ShipManager
implements Serializable {
static final long serialVersionUID = -3017226836104715117L;
private transient final Logger log;
private ShipEntity currentShip;
#EJB
private HarbourMasterLocal harbourMaster;
public ShipManager() {
log = LoggerFactory.getLogger(getClass());
}
public ShipEntity getCurrent() {
if (log.isInfoEnabled())
log.info("getCurrent(): " + currentShip);
return currentShip;
}
public void setCurrent(ShipEntity ship) {
if (log.isInfoEnabled())
log.info("setCurrent(" + currentShip + "): " + ship);
currentShip = ship;
}
public void changeShip(AjaxBehaviorEvent evt) {
if (log.isInfoEnabled())
log.info("Ship now: " + currentShip);
}
public List<ShipEntity> getList() {
try {
return harbourMaster.listShips();
} catch (Exception cause) {
log.error("Getting the list of ships", cause);
return new ArrayList<ShipEntity>(0);
}
}
}
Your stack trace looks incomplete in that it doesn't actually refer to your code(which is where I'd expect the npe be thrown). That notwithstanding, your select menu doesn't have a converter, so any other problems aside, your form would probably still not save or register the selection
Implement a JSF converter and declare it on that selectonemenu. This is mandatory when a select type component needs to select and save complex POJO types You can look at this example
Try to get rid of that gigantic <h:form/> in your markup. There are too many other components in that form that could be causing you problems. Break the components into smaller chunks in separate forms
If the scope of your bean is #RequestScoped then change it to #ViewScoped , in general ajax better be done with #ViewScoped... cause new instance of the bean created upon each submit...
#ManagedBean(name="shipManager")
#ViewScoped
Also Make sure that the changeShip method takes AjaxBehaviorEvent as the parameter
(ie)
public void changeShip (AjaxBehaviorEvent event){
//** do your stuf
}
and also specidy the execute and Render attributes inside f:Ajax
<f:ajax execute="ship" render="#form" listener="#{shipManager.changeShip}" />
Related
First of all a greeting and thanks in advance.
The reason for my creating this thread is because of an error that it generates when trying to load a file with
what I want is to capture a file, regardless of its extension, send it to the controller and then convert it to bytearray to store it in a postgre sql database.
<div class="row">
<div class=" text-mini col-lg-12 col-md-6 col-xs-6">
<h:form enctype="multipart/form-data">
<h:panelGrid columns="2">
<h:outputLabel value="Cargar archivo" for="fileUpload" />
<h:inputFile value="#{fileUploadFormBean.fileUpload}" id="fileUpload" />
<h:commandButton value="Cargar"/>
</h:panelGrid>
</h:form>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h:panelGrid rendered="#{not empty(fileUploadFormBean.fileUpload)}" columns="2" >
<h:outputText value="fileName:" />
<h:outputText value="#{fileUploadFormBean.fileUpload.submittedFileName}" />
<h:outputText value="contentType:" />
<h:outputText value="#{fileUploadFormBean.fileUpload.contentType}" />
<h:outputText value="size:" />
<h:outputText value="#{fileUploadFormBean.fileUpload.size}" />
</h:panelGrid>
</div>
</div>
package com.esmero.cl.mvno.ticketin.controller;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.servlet.http.Part;
#ManagedBean(name = "filecontroller")
#ViewScoped
public class UpLoadFileController implements Serializable{
private static final long serialVersionUID = 1L;
private Part fileUpload;
/**
* Creates a new instance of FileUploadFormBean
*/
public UpLoadFileController() {
}
public Part getFileUpload() {
return fileUpload;
}
public void setFileUpload(Part fileUpload) {
this.fileUpload = fileUpload;
}
}
enter image description here
enter image description here
I have a strange situation with a composite component. I'm using it all over my web application but now I noticed that if I update a form containing my composite component, the component get's rendered twice (at times).
My component (let's say it's called datecc) is defined 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:composite="http://java.sun.com/jsf/composite" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:body>
<composite:interface>
<composite:attribute name="value"/>
<composite:attribute name="shortFormat"/>
<composite:attribute name="style"/>
<composite:attribute name="styleClass"/>
<composite:attribute default="false" name="inputLabel"/>
</composite:interface>
<composite:implementation>
<span id="#{cc.clientId}">
<h:outputText rendered="#{not cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
<f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
</h:outputText>
<span>asdasdfasdf</span>
<h:inputText disabled="true" rendered="#{cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
<f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
</h:inputText>
</span>
</composite:implementation>
</h:body>
</html>
The page I'm calling it from is something similar to this:
<h:form id="form">
<p:dataTable id="rowsTable" value="#{myBean.rows}" var="it"
selectionMode="single" selection="#{myBean.selectedRow}" rowKey="#{it.key}"
rowStyleClass="#{myBean.isRed(it) ? 'red' : null}">
<p:ajax event="rowSelect" update=":menuForm :detailForm :contextualMenu"/>
<column>....</column>
<column><mycc:datecc value="#{it.date}" inputLabel="true" /></column>
</p:dataTable>
</h:form>
<h:form id="detailForm>
<!-- this field is rendered twice once I select a row in the above table -->
<mycc:datecc value="#{myBean.selectedRow.date}" inputLabel="true" />
</h:form>
I'm unfortunatelly doing some work on the setSelectedRow method in my bean #Named #ConversationScoped public class MyBean { ... } however I don't think that's causing the problem.
I solved my problem by implementing the following class.
package com.company.faces.cc;
import javax.faces.component.FacesComponent;
import javax.faces.component.NamingContainer;
import javax.faces.component.UIInput;
import javax.faces.component.UINamingContainer;
#FacesComponent("inputDate")
public class Date extends UIInput implements NamingContainer {
#Override
public String getFamily() {
return UINamingContainer.COMPONENT_FAMILY;
}
}
Although I don't really know why this solves the issue since it doesn't add much to the component.
Trying to use an ajax request to render a label without refreshing the entire page. So far every time I click the command button the whole page refreshes still and I can't seem to figure out what I am doing wrong.
Search By Title..
<h:commandButton class="addButton"
id="checkStatusButton"
value ="Check Status"
action = "#{itemWeb.findItem}">
<f:ajax execute="checkStatusForm"
event="click"
render="statusLabel"/>
</h:commandButton>
<h:outputText id="statusLabel"
value="#{itemWeb.foundItem.status}">
</h:outputText>
The page refresh because you do not use JSF Standard tags(h:head, h:body).
Thus, you should change the index.xhtml to below example.
<!--
Index.html setup
Holds the form for input data
-->
<!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">
<h:head>
<link href='http://fonts.googleapis.com/css?family=Roboto'
rel='stylesheet' type='text/css'></link>
<link href='resources/css/main.css'
rel='stylesheet' type='text/css'></link>
<title>
<ui:insert name="title"
Library Management System
</ui:insert>
</title>
<!--
Quick style setup..
-->
</h:head>
<h:body>
<h:form id="checkStatusForm">
<div class="group">
<h:inputText id="searchCheckInput"
value="#{itemWeb.searchString}">
</h:inputText>
<label>Search By Title..</label>
<span class="highlight"></span>
<span class="bar"></span>
</div>
<h:commandButton class="addButton"
id="checkStatusButton"
value ="Check Status"
action ="#{itemWeb.findItem}">
<f:ajax execute="checkStatusForm"
event="action"
render="statusLabel"/>
</h:commandButton>
<h:outputText id="statusLabel"
value ="#{itemWeb.foundItem.status}">
</h:outputText>
</h:form>
</h:body>
</html>
See also: Adding HTML Head and Body Tags
Try to process only the desired field rather than the whole form, in the execute attribute:
<h:commandButton class="addButton" id="checkStatusButton" value ="Check Status" action = "#{itemWeb.findItem}">
<f:ajax execute="searchCheckInput" event="click" render="statusLabel"/>
</h:commandButton>
You need to use event="action" instead of event="click". The event="action" is namely the default event the is listening on when nested in an h:commandButton component.
An example is shown below.
xhtml
<!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">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>ajax-call</title>
</f:facet>
</h:head>
<h:body>
<h:form id="checkStatusForm">
<h:inputText id="searchCheckInput"
value="#{itemWeb.searchString}">
</h:inputText>
<label>Search By Title..</label>
<br/>
<h:commandButton class="addButton"
id="checkStatusButtonListener"
value ="Check Status (Listener)"
actionListener="#{itemWeb.findItemListener}">
<f:ajax execute="checkStatusForm"
event="action"
render="statusLabel"/>
</h:commandButton>
<h:commandButton class="addButton"
id="checkStatusButton"
value ="Check Status"
action="#{itemWeb.findItem}">
<f:ajax execute="checkStatusForm"
event="action"
render="statusLabel"/>
</h:commandButton>
<br/>
<h:outputText id="statusLabel"
value ="#{itemWeb.foundItem.status}">
</h:outputText>
</h:form>
</h:body>
</f:view>
</html>
managedbean
package com.wittakarn.view;
import com.wittakarn.model.Item;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
/**
*
* #author Wittakarn
*/
#ViewScoped
#ManagedBean(name = "itemWeb")
public class ItemWeb implements Serializable{
private String searchString;
private Item foundItem;
public ItemWeb(){
foundItem = new Item();
}
public String getSearchString() {
return searchString;
}
public void setSearchString(String searchString) {
this.searchString = searchString;
}
public Item getFoundItem() {
return foundItem;
}
public void setFoundItem(Item foundItem) {
this.foundItem = foundItem;
}
public void findItem(){
foundItem.setStatus("status A");
}
public void findItemListener(ActionEvent event){
foundItem.setStatus("status B");
}
}
domain
package com.wittakarn.model;
import java.io.Serializable;
/**
*
* #author Wittakarn
*/
public class Item implements Serializable{
private String status;
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
}
I have a form submited with ajax which normally must execute the removeArticle function. The problem is when I'm clicking the button, the function is never called and a beautiful error message is returned (displayed with alert) telling me : "serverError: class javax.ejb.NoSuchEJBException CORBA OBJECT_NOT_EXIST 9998 Maybe; nested exception is: org.omg.CORBA.OBJECT_NOT_EXIST: vmcid: 0x2000 minor code: 1806 completed: Maybe". I'm using in another part a similar (almost) form for adding a cocktail. When I place my removeArticle calling into this other form it's executed ...
My code is the following :
<?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 template="template/common/commonLayout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:component="http://java.sun.com/jsf/composite/component"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="title">Panier</ui:define>
<ui:define name="content">
<c:if test="#{dataManagedBean.cartLength > 0}">
<div id="cart-component">
<h2>Panier</h2>
<div class="well well-small">
<ul class="thumbnails">
<ui:repeat value = "#{dataManagedBean.cartContent}" var = "item" varStatus="status">
<h:form id="cocktail-panier">
<div class="media">
<div class="pull-left media-object span2">
<div class="text-center">
<img src="resources/img/#{item.photoURIName}.#{item.photoURIExt}"
alt="Photo du cocktail #{item.name}"/>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">
#{item.name}
</h3>
<div class="well well-small">
<ul class="thumbnails">
<ui:repeat value="#{dataManagedBean.getCocktailBeverages(dataManagedBean.getCocktailFull(item))}" var="bev" varStatus="status1">
<component:ShowBeverageComponent item="#{bev}"/>
</ui:repeat>
<div class = "span2 right">Quantité : #{dataManagedBean.getQuantityForCocktailInCart(item)}</div><br />
<div class = "span2 right">Prix unitaire : #{item.price} €</div><br />
<div class = "span2 right">Prix total : #{item.price * dataManagedBean.getQuantityForCocktailInCart(item)} €</div>
</ul>
<h:commandButton
title=""
value="Supprimer les articles "
type="button"
actionListener="#{dataManagedBean.removeArticle(item)}">
<f:ajax execute="#form" render="#all" />
</h:commandButton>
<h:inputText id="qty" maxlength="3" value="#{dataManagedBean.qty}" styleClass="input-mini" />
</div>
</div>
</div>
</h:form>
</ui:repeat>
</ul>
</div>
</div>
</c:if>
<li class="thumbnail">
<div class="totalPanier">
<div class="total-cart"> Total: #{dataManagedBean.getCartPrice()}€</div>
<h:button class="totalPanier-button"
image="#{resource['img:btn_valider.png']}"
alt="valider" outcome="Form.xhtml" rendered="#{dataManagedBean.cartLength > 0}">
</h:button>
<div class="clear"></div>
</div>
</li>
</ui:define>
</ui:composition>`
HTML Elements IDs shouldn't have "-" like in your: <h:form id="cocktail-panier"> AND <div id="cart-component">, this causes Problems in js. replace all these ids with underscore cart_component, or use Java Style like cartComponent
use commandButton like this:
<h:commandButton
title=""
value="Supprimer les articles "
type="button">
<f:ajax execute="#form" render="#all" listener="#{dataManagedBean.removeArticle(item)}"/>
</h:commandButton>
Ajax-Listener method like:
public final void removeArticle(final YourItemClass item){
you use jstl components. JSTL will run on build time, and if your Bean is requestScoped, then the render / action of commandbutton will not fire.
change your bean (if not) to ViewScope or SessionScope, and use rendered instead of <c:if...
somthing like:
replace this <c:if test="#{dataManagedBean.cartLength > 0}">
width this:
<h:panelGroup display="block" rendered="#{dataManagedBean.cartLength > 0}">
.....
ADDITIONALY:
you use templates. your template should somthing like this:
<!DOCTYPE html>
<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"
>
<h:head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="stylesheet.css"/>
<title>${pageTitle}</title>
In your XHTML Page where you use this template, you don't need to declare XML or HTML docType, and use your template directly:
<ui:composition template="template/common/commonLayout.xhtml"
....
Use <h:head> in your template instead of the <head>, else JSF will not include the jsf.js in the document
The problem was the nested ui:repeat ! I replaced my 2 ui:repeat by 2 c:forEach and everything is working fine !
how to pass a DOM object (an input) to the handler of the oncomplete event so I can manipulate it's parent?
JSF code:
<p:datatable>
...
<p:column>
<h:inputText id="my_field" value="#{bean.my_field}">
<p:ajax oncomplete="handle_oncomplete( $(this) )" listener="#{bean.handle_change}" />
</h:inputText>
</p:column>
...
</p:datatable>
JS code:
//NOT WORKING
function handle_oncomplete(my_param) {
_parent = my_param.parent();
_parent.css( "background", "#123456");
}
I used my_param.attr('source') to access the DOM object passed:
//WORKING
function handle_oncomplete(my_param) {
_parent = $(my_param.attr('source')).parent();
_parent.css( "background", "#123456");
}
Is there any other way?
EDIT: console.log(my_param.parent()) output
EDIT: Add code to reproduce the issue
<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">
<f:view contentType="text/html" locale="fr" encoding="UTF-8">
<h:head>
</h:head>
<h:body>
<h:form id="dvForm">
<div id="my_id" style="padding: 50px;">
<h:inputText id="my_input">
<p:ajax update="" oncomplete="complete_handler($(this) )"
listener="#{bean.handle_change}" />
</h:inputText>
</div>
</h:form>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<script type="text/javascript">
function complete_handler(my_param) {
my_obj = my_param.attr('source');
_parent = my_obj.parent();
_parent.css( "background-color", "#123456");
}
</script>
</h:body>
EDIT: the generated html code
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet"
href="/myproject/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" /><script
type="text/javascript"
src="/myproject/javax.faces.resource/jquery/jquery.js.xhtml;jsessionid=5DDDEBBC02044818081D23A267940E72?ln=primefaces">
</script><script
type="text/javascript"
src="/myproject/javax.faces.resource/primefaces.js.xhtml;jsessionid=5DDDEBBC02044818081D23A267940E72?ln=primefaces">
</script></head><body>
<form id="dvForm" name="dvForm" method="post"
action="/myproject/test/t1.xhtml;jsessionid=5DDDEBBC02044818081D23A267940E72"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="dvForm" value="dvForm" />
<div id="my_id" style="padding: 50px;"><input id="dvForm:my_input" type="text"
name="dvForm:my_input" onchange="PrimeFaces.ab({source:this,event:'valueChange',process:'dvForm:my_input',oncomplete:function(xhr,status,args){complete_handler($(this) );}},
arguments[1]);" /></div><input type="hidden" name="javax.faces.ViewState"
id="javax.faces.ViewState" value="5837380100056002382:-3836335094805954101" autocomplete="off" />
</form>
<script type="text/javascript">
function complete_handler(my_input) {
my_obj = my_input.attr('source');
$(my_obj).parent().css('background-color', "#123456");
}
</script></body>
</html>