Bean value not updated with Ajax - ajax

I have a PopupPanel with a form inside. The form has been previously rendered by ajax, so by some issue / bug with richfaces, I am forced to put the a4j:commandButton outside the form, with an execute attribute.
When I hit the button, it calls the server but the bean value is not updated.
Any suggestion?
Simplied code of my form:
<rich:popupPanel id="workOrderPopup" modal="true" resizeable="true"
onmaskclick="#{rich:component('workOrderPopup')}.hide()" width="750" height="420">
<h:form id="editWorkOrderForm" onkeypress="if (event.keyCode == 13) { document.getElementById('workOrderEdition:saveWO').click(); return false; }">
[[[FORM FIELDS]]]
</h:form>
<a4j:commandButton id="createWO" value="Guardar" action="#{ticketCont.saveWorkOrder()}"
render="workOrders,footer" execute="editWorkOrderForm" oncomplete="#{rich:component('workOrderPopup')}.hide()"/>
</rich:popupPanel>
Complete code of my form:
<rich:popupPanel id="workOrderPopup" modal="true" resizeable="true"
onmaskclick="#{rich:component('workOrderPopup')}.hide()" width="750" height="420">
<h:form id="editWorkOrderForm" onkeypress="if (event.keyCode == 13) { document.getElementById('workOrderEdition:saveWO').click(); return false; }">
<table width="100%" id="editWorkOrderTable">
<tr>
<td>
<h:outputText value="ID" for="editedWOId"/><br/>
<h:inputText value="#{ticketCont.workOrder.id}" id="editedWOId" readonly="true" size="7"/>
</td>
<td>
<h:outputText value="Descripción" for="editedWODescription"/><br/>
<h:inputText value="#{ticketCont.workOrder.description}" id="editedWODescription"/>
</td>
<td>
<h:outputText value="Estado" for="editedWOState"/><br/>
<h:selectOneListbox value="#{ticketCont.workOrder.status}">
<f:selectItem itemLabel="Abierto" itemValue="0"/>
<f:selectItem itemLabel="Cerrado" itemValue="1"/>
</h:selectOneListbox>
</td>
<td>
<h:outputText value="Tiempo (en horas)" for="editedWOTime"/><br/>
<rich:inputNumberSpinner value="#{ticketCont.workOrder.workHours}" inputSize="4"/>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center">
<h:outputText value="Recursos" for="editedWOResources"/><br/>
<rich:pickList value="#{ticketCont.workOrder.resources}" var="_resource" listHeight="200px" id="editedWOResources">
<f:selectItems value="#{ticketCont.activeResources}"/>
<f:converter converterId="es.caib.gesma.gesman.data.converter.ResourceConverter" />
<rich:column>
#{_resource.name}
</rich:column>
</rich:pickList>
</div>
</td>
</tr>
</table>
</h:form>
<a4j:commandButton id="createWO" value="Guardar" action="#{ticketCont.saveWorkOrder()}"
render="workOrders,footer" execute="editWorkOrderForm" oncomplete="#{rich:component('workOrderPopup')}.hide()"/>
</rich:popupPanel>
I am using JBoss 6.1, Mojarra 2.1.9 and Richfaces 4.

i think problem is not in this code but problem from other click your editWorkOrderForm is render for that your from is not working...
for that you can do like that..
<rich:popupPanel id="workOrderPopup" modal="true" resizeable="true"
onmaskclick="#{rich:component('workOrderPopup')}.hide()" width="750" height="420">
<h:form id="editWorkOrderForm" onkeypress="if (event.keyCode == 13) { document.getElementById('workOrderEdition:saveWO').click(); return false; }">
<a4j:outputpanal id="editWorkOrderPanal">
<table width="100%" id="editWorkOrderTable">
<tr>
<td>
<h:outputText value="ID" for="editedWOId"/><br/>
<h:inputText value="#{ticketCont.workOrder.id}" id="editedWOId" readonly="true" size="7"/>
</td>
<td>
<h:outputText value="Descripción" for="editedWODescription"/><br/>
<h:inputText value="#{ticketCont.workOrder.description}" id="editedWODescription"/>
</td>
<td>
<h:outputText value="Estado" for="editedWOState"/><br/>
<h:selectOneListbox value="#{ticketCont.workOrder.status}">
<f:selectItem itemLabel="Abierto" itemValue="0"/>
<f:selectItem itemLabel="Cerrado" itemValue="1"/>
</h:selectOneListbox>
</td>
<td>
<h:outputText value="Tiempo (en horas)" for="editedWOTime"/><br/>
<rich:inputNumberSpinner value="#{ticketCont.workOrder.workHours}" inputSize="4"/>
</td>
</tr>
<tr>
<td colspan="4">
<div align="center">
<h:outputText value="Recursos" for="editedWOResources"/><br/>
<rich:pickList value="#{ticketCont.workOrder.resources}" var="_resource" listHeight="200px" id="editedWOResources">
<f:selectItems value="#{ticketCont.activeResources}"/>
<f:converter converterId="es.caib.gesma.gesman.data.converter.ResourceConverter" />
<rich:column>
#{_resource.name}
</rich:column>
</rich:pickList>
</div>
</td>
</tr>
</table>
<a4j:commandButton id="createWO" value="Guardar" action="#{ticketCont.saveWorkOrder()}"
render="workOrders,footer" oncomplete="#{rich:component('workOrderPopup')}.hide()"/>
</a4j:outputPanal>
</h:form>
</rich:popupPanel>
now on click the pop is open there in render="editWorkOrderPanal" this is work 4 u..

Related

p:ajax update of more than one element

I'm having trouble when trying to update two elements.
This is my code:
<h:form id="all">
<table id="gt" class="CartContents Stylize General" cellspacing="0" cellpadding="0" style="display:#{clothesBean_i.convertToList(clothesBean_i.cartclothes)}">
<tbody>
<!-- AFFICHAGE PRODUIT -->
<ui:repeat value="#{clothesBean_i.convertToList(clothesBean_i.cartclothes)}" var="c">
<tr>
<td class="CartThumb" style="">
<img src="" /> 
</td>
<td class="ProductName" colspan="1">
<h5></h5>
<br />
</td>
<td align="center" class="CartItemIndividualPrice">
$ #{c.price}
</td>
<td id="qt" align="center" class="CartItemIndividualPrice">
<h:outputLabel for="ajaxSpinner" value="" />
<p:outputPanel id="mypanel">
<p:spinner id="ajaxSpinner" value="#{clothesBean_i.qt}" min="1" max="100">
<p:ajax update="tot grandT" process="#this" />
</p:spinner>
</p:outputPanel>
</td>
<td align="center" class="CartItemIndividualPrice">
<h:outputText id="tot" value="$ #{clothesBean_i.getClothePriceQt(c)}" />
</td>
</tr>
</ui:repeat>
</tbody>
<tfoot >
<tr class="SubTotal GrandTotal">
<td colspan="4">Grand Total:</td>
<td >
<h:outputText id="grandT" value="$ #{clothesBean_i.getClothesPrice(clothesBean_i.convertToList(clothesBean_i.cartclothes))}" />
</td>
</tr>
</tfoot>
</table>
</h:form>
in this line
<p:ajax update="tot grandT" process="#this" />
when I give just one id (tot or grandT) it works fine,
but with two ids I just get a blank page (nothing is showing)!

malformedXML: Index or size is negative or greater than the allowed amount

I use JSF 2.0 and Twitter Bootstrap.
I am trying to change a value in field after an ajax request. However, I get a malformedXML error when I change value and inputText lost focus. The xhtml file looks like :
<h:inputText value="#{product.count}>
<f:ajax listener="#{orderBean.changeTotal} render="outputTotal" />
<f:attribute name="productId" value="#{product.id}" />
</h:inputText>
.....
<h:outputText id="outputTotal" value="#{product.total}" />
.....
And the OrderBean have a code:
public void changeTotal(AjaxBehaviorEvent event) {
Integer id = (Integer) event.getComponent().getAttributes().get("productId");
for (FoProduct pio : fo_orderList) {
if (pio.getId() == id) {
pio.setTotal(pio.getCount() * pio.getPrice());
}
}
}
Result: total value is changed, and JSF show me message "mallformedXML: Index or size is negative or greater than the allowed amount"
P.S.: More xhtml for Hector William:
<ui:repeat value="#{orderBean.fo_orderList}" var="product">
<h:form>
<div class="col-md-3">
<table class="table table-bordered table-hover table-condensed table-striped">
<tr>
<td>
Count:
</td>
<td>
<div class="input-group input-group-sm">
<h:inputText class="input-sm" value="#{product.count}" >
<f:ajax listener="#{orderBean.changeTotal}" render="outputTotal"/>
<f:attribute name="productId" value="#{product.id}" />
</h:inputText>
</div>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Price:" />
</td>
<td>
<div class="input-group input-group-sm">
<h:outputText value="#{product.price}" />
</div>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="Total:" />
</td>
<td>
<div class="input-group input-group-sm">
<h:outputText id="outputTotal" value="#{product.total}" />
</div>
</td>
</tr>
</table>
</h:form>
</ui:repeat>

Problems With Datatable

I want to pass a value from a datatable to be updated and located within 1 p: dialog to 1 p: inputText as shown in the example
and here is the datatable, well the datatable is updated based on a query from a backbean and is based on the 3 inputtext, the first inputtext is to show the data to pass to inputtext is fixed and updated who is the commnandbutton
<table width="100%" border="0" bgcolor="azure">
<tr>
<td><h:outputText value="Codigo :" class="texto"/></td>
<td width="0">
<p:inputText style="width: 100%" value="#{personaBean.codigo}" id ="idpersona" label="idpersona" maxlength="30"/></td>
<td width="25%">
<h:outputText value="Apellido Paterno :" class="texto"/></td>
<td>
<p:inputText style="width: 100%;" value="#{personaBean.pat}" id="paterno" maxlength="20" /></td>
<td>
<p:watermark value="Ingrese Apellido Paterno" for="paterno"/></td>
</tr>
<tr>
<td> </td>
<td rowspan="2">
<p:commandButton value=" B U S C A R " id="btnbuscar" update=":tabla" actionListener="#{personaBean.nombre}"/>
</td>
<td><h:outputText value="Apellido Materno :" class="texto"/></td>
<td><p:inputText style="width: 100%" value="#{personaBean.mat}" id="materno" maxlength="20"/> </td>
<td><p:watermark value="Ingrese Apellido Materno" for="materno"/> </td>
</tr>
<tr>
<td> </td>
<td><h:outputText value="Nombres :" class="texto"/></td>
<td>
<p:inputText style="width: 100%" value="#{personaBean.nomb}" id="nombres"/>
</td>
<td><p:watermark value="Ingrese Nombres " for="nombres"/> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</h:form>
<hr size="10" style="color: #D20005; background-color: #c2dfef; border-radius: 5px; width: 100%;"/>
<h:form id="tabla">
<p:dataTable var="Alumnos" value="#{personaBean.lsalumn}" id="dt_Alumnos"
sortMode="simple" emptyMessage="No hay Registros que Mostrar" rows="50" scrollable="true" scrollHeight="400" liveScroll="true">
<p:column headerText="Id" id="id" >
<f:facet name="header">
<h:outputText value=" CODIGO " class="text"/>
</f:facet>
<h:outputText value="#{Alumnos.persona}"/>
</p:column>
<p:column >
<f:facet name="header" >
<h:outputText value=" APELLIDOS Y NOMBRES" class="text" />
</f:facet>
<h:outputText value="#{Alumnos.nombres}"/>
</p:column>
<p:column style="width: 4%" exportable="false">
<p:commandButton actionListener="#{personaBean.vercodificacion}" >
<f:setPropertyActionListener value=""
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<!-- <f:facet name="footer">
<p:commandButton id="btnbuscCancelar" oncomplete="DialogFrmUbigeo.hide()" icon="nuevo.png" update=":fotos" title="Cancelar" value="Cancelar"/>
</f:facet> -->
</p:dialog>

have a error like "malformedXML: During update: j_idt8:showTime not found"

i am using the jsf 2.0 and with the ajax and when i select the item from the dropdown box i want it to show me the item from the showTime list
xhtml file:
<tr>
<td>Movies:</td>
<td>
<h:selectOneMenu value="#{locationBean.movie}"
disabled="#{locationBean.movieListDisabled}"
id="movieList">
<f:selectItems value="#{locationBean.movies}"/>
<f:ajax render="showTime"/>
</h:selectOneMenu></td>
</tr>
<tr>
<td>Availablity:</td>
<td>
<ui:repeat value="#{locationBean.showTime}" var="item" id="showTime">
<div><h:inputText value="#{item.value}" id="showTime"/></div>
</ui:repeat>
</td>
</tr>
and from bean i am returning the list of the showTiming ..
how to get over this error
From BalusC: "the by itself doesn't generate any HTML, therefore JS/Ajax can't find anything in HTML to update/render"
Try something like this:
<tr>
<td>Movies:</td>
<td>
<h:selectOneMenu value="#{locationBean.movie}" disabled="#{locationBean.movieListDisabled}" id="movieList">
<f:selectItems value="#{locationBean.movies}"/>
<f:ajax event="change" render="showTimePanel"/>
</h:selectOneMenu>
</td>
</tr>
<tr>
<td>Availablity:</td>
<td>
<h:panelGroup id="showTimePanel">
<ui:repeat value="#{locationBean.showTime}" var="item">
<div><h:inputText value="#{item.value}"></div>
</ui:repeat>
</h:panelGroup>
</td>
</tr>

Show JSF validation error next to the fields

I want to display the error messages beside the text fields.
I am able to show the error message but all the error messages come at once...
<h:form id="LoginForm">
<table>
<tr>
<td colspan="4" id="login">
<h2 style="border-bottom: 1px solid #CCCCCC;">Login</h2>
<tr>
<td class="label">
<h:outputLabel for="email" value="Login Email:"></h:outputLabel>
</td>
<td class="field">
<h:inputText id="email" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
</td>
</tr>
<tr>
<td class="label">
<h:outputLabel for="password" value="Password:"></h:outputLabel>
</td>
<td class="field">
<h:inputSecret id="password" size="20" maxlength="50" required="true" requiredMessage="Please confirm your password" value="#{loginController.selected1.password}"><f:validateLength minimum="6" maximum="50"></h:inputSecret>
</td>
</tr>
</td>
</tr>
<tr>
<td>
<h:commandButton value="Login" type="submit" action="#{loginController.checkValidUser()}"></h:commandButton>
</td>
</tr>
</table>
</h:form>
How to modify the code to show error messages beside the text fields?
Just put a <h:message> right there where you need to see it. E.g.
<tr>
<td class="label">
<h:outputLabel for="email" value="Login Email:"></h:outputLabel>
</td>
<td class="field">
<h:inputText id="email" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
<h:message for="email" />
</td>
</tr>
or
<tr>
<td class="label">
<h:outputLabel for="email" value="Login Email:"></h:outputLabel>
</td>
<td class="field">
<h:inputText id="email" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com" value="#{loginController.selected1.email}"> <f:validateLength maximum="70"></f:validateLength></h:inputText>
</td>
<td class="message">
<h:message for="email" />
</td>
</tr>
Unrelated to the concrete problem, I suggest to have a look at <h:panelGrid>. It minimizes the ugly HTML table boilerplate. Your code would then end up like follows:
<h:form id="LoginForm">
<h2>Login</h2>
<h:panelGrid columns="3" columnClasses="label,field,message">
<h:outputLabel for="email" value="Login Email:" />
<h:inputText id="email" value="#{loginController.selected1.email}" size="20" maxlength="70" required="true" requiredMessage="Please enter your email,eg:yourid#domain.com">
<f:validateLength maximum="70" />
</h:inputText>
<h:message for="email" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret id="password" value="#{loginController.selected1.password}" size="20" maxlength="50" required="true" requiredMessage="Please confirm your password">
<f:validateLength minimum="6" maximum="50" />
</h:inputSecret>
<h:message for="password" />
<h:panelGroup />
<h:commandButton value="Login" action="#{loginController.checkValidUser()}" />
<h:panelGroup />
</h:panelGrid>
</h:form>

Resources