Problems With Datatable - 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>

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>

Bean value not updated with 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..

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>

PrimeFaces Ajax

I am trying to make login with jsf.
I want to hide login panel when user registered.
I did this with jsf ajax.
When I try to do this with primefaces. I am failed.
I triy in jsf ajax like this.
<h:form id="register">
<table style="width: 49%; margin-right: auto; margin-left: auto;">
<tr>
<td colspan="3">
All fields are required.</td>
</tr>
<tr>
<td class="style2" style="height: 51px">Username</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regusername" style="width:155px;height:24px;"
value="#{userRegister.regUser.username}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Name</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regname" style="width:155px;height:24px;"
value="#{userRegister.regUser.name}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Mail</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px"><h:inputText
id="regmail" style="width:155px;height:24px;"
value="#{userRegister.regUser.mail}">
</h:inputText></td>
</tr>
<tr>
<td class="style2" style="height: 51px">Password</td>
<td style="width: 17px; height: 51px;">:</td>
<td class="style3" style="height: 51px">
<h:inputSecret
id="regpassword" style="width:155px;height:24px;"
value="#{userRegister.regUser.password}">
</h:inputSecret></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="style3"><h:commandButton
style="width:76px;height:26px" value="Clear" type="reset">
</h:commandButton> <h:commandButton style="width:75px;height:26px"
value="Register" action="#{userRegister.register()}"
method="post">
<f:ajax execute="regname regusername regpassword regmail"
render="registermessage" />
</h:commandButton></td>
</tr>
<tr>
<td colspan="3"><h:outputText id="registermessage"
value="#{userRegister.message}"></h:outputText></td>
</tr>
</table>
</h:form>
</h:panelGroup>
<h:panelGroup rendered="#{userLogin.isLoggedin()== true}"
layout="block">
You are already loggedin !!
</h:panelGroup>
When ı try this in primefaces like this:
<p:panel id ="registerPanel" header="User Registration" align="center"
style="text-align:center;">
<table style="width: auto; margin: auto;">
<tr>
<td style="text-align: right;"><h:outputLabel for="regname"
value="Name Surname : * " /></td>
<td style="text-align: left"><p:inputText id="regname"
value="#{userRegister.regUser.name}" size="40" required="true"
label="Name and Surname">
<f:validateLength minimum="2" />
</p:inputText> <p:watermark for="regname" value="Name Surname" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2"><p:message
for="regname" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel
for="regusername" value="Username : * " /></td>
<td style="text-align: left"><p:inputText id="regusername"
value="#{userRegister.regUser.username}" size="40"
required="true" label="Username">
<f:validateLength minimum="3" />
</p:inputText> <p:watermark for="regusername" value="Username" /></td>
</tr>
<tr>
<td style="text-align: riht" colspan="2"><p:message
for="regusername" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel for="regmail"
value="E-Mail : * " /></td>
<td style="text-align: left"><p:inputText id="regmail"
value="#{userRegister.regUser.mail}" size="40" required="true"
label="Mail">
<f:validateLength minimum="2" />
</p:inputText> <p:watermark for="regmail" value="mail#example.com" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2"><p:message
for="regmail" /></td>
</tr>
<tr>
<td style="text-align: right;"><h:outputLabel for="paswword"
value="Password : * " /></td>
<td style="text-align: left"><p:password id="regpassword"
value="#{userRegister.regUser.password}" size="40"
required="true" label="Password">
<f:validateLength minimum="5" />
</p:password> <p:watermark for="regpassword" value="Password" /></td>
</tr>
<tr>
<td style="text-align: left" colspan="2"><p:message
for="regpassword" /></td>
</tr>
<tr>
<td style="text-align: right" colspan="2">
</td>
</tr>
<tr>
<td style="text-align: right" colspan="2">
<p:commandButton value="Clear" image="ui-icon ui-icon-arrowrefresh-1-w"
type="reset"/>
<p:commandButton value="Register" image="ui-icon ui-icon-disk"
action="#{userRegister.register()}" method="post">
<f:ajax
render="registerpaneli" />
</p:commandButton>
</td>
</tr>
</table>
-->
</h:panelGroup>
I registraion panel cant hiden.
What is the problem ?
Remove the
<p:commandButton ....>
<f:ajax render="what-ever">
</p:commandButton>
By
<p:commandButton update="what-ever" ../>
Furthermore, you can read Primefaces' Document and its demo.
Because in Primefaces, most components are compatible with Ajax, especially <p:commandButton/> because it has Ajax turned on by default.
In PrimeFaces, <p:commandButton> already has built-in ajax functionality. You don't need to use <f:ajax>. In fact, <f:ajax> cannot be used with PrimeFaces. If you really need to use it, you must use <p:ajax> instead.
To fix your issue, I think you should change you button like this:
<p:commandButton value="Register" actionListener="#{userRegister.register}" update="registerPanel" />

Resources