Messages are not displaying after clicking command button in primefaces - ajax

I used an input text, upload file and command button properties.My File upload mode is basic.In command button i made ajax=false.I used required=true in both the fields.While clicking save with empty fields, corresponding method is executing and message is displaying in console, but error message is not displaying in UI.
<p:dialog widgetVar="addDialogWidgetVar" id="addDialogWidgetVarId" dynamic="true" >
<table style="width: 100%;">
<tr>
<td>
<p:messages for="errorMsgId" id="errorMsgId" autoUpdate="true" showDetail="false" showSummary="true" closable="true"/>
</td>
</tr>
</table>
<h:form id="formId" enctype="multipart/form-data">
<table>
<tr>
<td>
<label style="margin-top: 5%"><h:outputText value="Name:"/><h:outputText value="*" style="color:red"/></label>
</td>
<td width="10%"/>
<td>
<p:inputText value="#{manageBean.attachment.fileName}" id="fileNameId" maxlength="60" style="width:70"
required="#{not empty param[save.clientId]}" requiredMessage="Please enter Attachment name"></p:inputText>
</td>
</tr>
<tr height="10"></tr>
<tr>
<td>
<label style="margin-top: 5%"><h:outputText value="Upload Attachment:"/><h:outputText value="*" style="color:red"/></label>
</td>
<td width="10%"/>
<td>
<p:fileUpload label="Select a file" mode="simple" value="#{manageBean.attachment.file}"
allowTypes="/(\.|\/)(pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG)$/"
invalidFileMessage="Allow only (pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG) file."
multiple="false" required="#{not empty param[save.clientId]}" requiredMessage="Please select a file" >
</p:fileUpload>
</td>
</tr>
</table>
<br />
<table style="margin-left: 30%;">
<tr align="center">
<td>
<p:commandButton value="Close" actionListener="#{manageBean.cancelAttachment}" oncomplete="addDialogWidgetVar.hide()" />
</td>
<td>
<p:commandButton id="submitbtnid" value="Save" ajax="false" binding="#{save}"
actionListener="#{manageBean.saveAttachment}" update=":errorMsgId"/>
</td>
</tr>
</table>
</h:form>
</p:dialog>

Try do submit without ajax for test, and also put p:growl in the page, try get messages without update messages component and find bug.

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>

JSF Primefaces validation not working

After clicking the submit button, it is not hitting my managed bean, but it is not displaying the validation message either. I feel like this is very simple and do not know why it would not be working.
<h:form prependId="false">
<table class="contactForm">
<tr>
<td>Name: </td>
<td><p:inputText size="20" id="name" value="#{contactManagedBean.name}" required="true" requiredMessage="Name is required" /></td>
<td><p:message for="name" /></td>
</tr>
<tr>
<td>Email: </td>
<td><p:inputText size="20" id="email" value="#{contactManagedBean.email}" required="true" requiredMessage="Email is required" /></td>
<td><p:message for="email" /></td>
</tr>
<tr>
<td>Phone (###-###-####) (Optional): </td>
<td><p:inputText size="20" id="phone" maxlength="12" value="#{contactManagedBean.phone}"/></td>
<td><p:message for="phone" /></td>
</tr>
<tr>
<td>Comments: </td>
<td><p:inputTextarea rows="5" cols="30" id="comments" value="#{contactManagedBean.comments}" required="true" requiredMessage="Please enter some comments"></p:inputTextarea></td>
<td><p:message for="comments" /></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;"><p:commandButton value="Submit" actionListener="#{contactManagedBean.submitComment()}" /></td>
</tr>
</table>
</h:form>
add id to h:form and add update attribute to button.
ex:
<h:form id="form">
...
<p:commandButton value="Submit" update="form" actionListener="#{contactManagedBean.submitComment()}" />
</h:form>

How to render h:message only if validation fails for the component

i have an issue with using p:messages so i am trying to use p:message for each component as follows:
<div style="position: relative;">
<h:panelGrid id="messages" columns="1">
<p:message for="idTxtFirstName" id="msgFirstName" />
<p:message for="idTxtLastName" id="msgLastName" />
<p:message for="idTxtTitle" id="msgTitle" />
<p:message for="idTxtCompany" id="msgCompany" />
<p:message for="idTxtEmail" id="msgEmail" />
<p:message for="idTxtPhoneNumber" id="msgPhoneNumber" />
<p:message for="idEstNumOfUser" id="msgEstNumOfUser" />
</h:panelGrid>
</div>
the defaul generated html even if there are any errors is:
<table id="betasignup:messages">
<tbody>
<tr>
<td><div id="betasignup:msgFirstName" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgLastName" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgTitle" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgCompany" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgEmail" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgPhoneNumber" aria-live="polite"></div></td>
</tr>
<tr>
<td><div id="betasignup:msgEstNumOfUser" aria-live="polite"></div></td>
</tr>
</tbody>
</table>
so i was wondering how to render the message component if only validation fails for the component (not validation fails in general), i mean don't generate any html until there are validation errors only for the related component.
You need to specify the id of the component that should be validated in the message tag. If you want to validate an input for an <p:inputText> it should look like this:
<p:inputText id="inputText" value="#{mrBean.text}"/>
<p:message for="inputText" id="inputTextMessage"/>
Then the message is only rendered if JSF validation fails for the component.
As I see you have chosen other ids in the for of the message. This should be the reason why this does not work.

How to display <form:errors> outside <form:form> in Spring?

I'm new to Spring and I've been having some trouble trying to show a form errors.
I have the following form:
<form:form action="loginform.html" commandName="loginForm" onsubmit="goWait();">
<table><tr>
<td>User Name: </td>
<td><form:input path="userName" /></td>
</tr>
<tr>
<td>Password: </td>
<td><form:password path="password"/> </td>
<tr>
<td colspan="2">
<input type="submit" value="Login" style="butt-login">
</td>
</tr>
</table>
</form:form>
The form, as can be seen, is backed by a LoginForm Bean that validates it.
I want to show all the errors from the validation, outside this form. Something like this:
<div>
<ul>
<li><form:errors path="userName"/></li>
<li><form:errors path="password"/></li>
</ul>
</div>
This div should be outside the , so I can't use the tag.
How can I do this?
You could just capture the html produced by form:errors and display it somewhere after the form:
<form:form ...>
<c:set var="err">
<form:errors path="*" element="div" id="err" cssClass="hidden" />
</c:set>
</form:form>
....
<c:out value="${err}" />
If you want to show the errors before the form, you can do that with a bit of jQuery
Yes, you can user form:errors tag outside form:form tag
<form:errors path="yourBindedObject.*" />
<form:form action="loginform.html" commandName="loginForm" onsubmit="goWait();">
<table><tr>
<td>User Name: </td>
<td><form:input path="userName" /></td>
</tr>
<tr>
<td>Password: </td>
<td><form:password path="password"/> </td>
<tr>
<td colspan="2">
<input type="submit" value="Login" style="butt-login">
</td>
</tr>
</table>
</form:form>
If you want to show all errors associated with any fields just pass a star to the path attribute.
<form:errors path="*" />
But if you want to show global error messages just pass an empty string:
<form:errors path="" />
More information related: http://www.mkyong.com/spring-mvc/spring-mvc-form-errors-tag-example/

Resources