We Keep Coding

In Primefaces inputText required=true, how can I remove ui-state-error as soon as something is entered?

When submitting a form that includes a required inputText, the styles that indicate not validated fields remain in place until submitting again. I want the styles to disappear as soon as the field is edited.
<p:inputText value="#{data.bezeichnung}"
id="bezeichnung"
styleClass="panelInputField input_mandatory"
required="true"
title="Bezeichnung"/>

After a lot of trying around, I found the easiest answer to add a "onkeyup" as follows:
<p:inputText value="#{data.bezeichnung}" id="bezeichnung"
styleClass="panelInputField input_mandatory"
required="true"
onkeyup="$(this).removeClass('ui-state-error');"
title="Bezeichnung"/>
If the jquery code needs to be in a more general place, the following might work as well: (it may be helpful to know the escaping codes used here)
onfocus="$('.ui-state-error').removeClass('ui-state-error');"
onkeyup="$('input[name="form:bezeichnung"]').removeClass('ui-state-error');"
onkeyup="$('input[name$=bezeichnung]').removeClass('ui-state-error');"

How to render more JSF components by using a ui:repeat component?

I have a question concerning the jsf component . Here is a small code example:
<ui:repeat var="bean" value="myBean.myListToIterate">
<h:selectOneCheckbox value="#{myBean.specificField}" />
#{bean.car.name}
</ui:repeat>
Question 1: Why the expression #{bean.car.name} alone inside the ui:repeat element and why not for example in a
<h:outputLabel value="#{bean.car.name}" />"?
If i use this, nothing will be displayed.
Question 2: Why does this example doesn´t look very well, if i use a
<h:selectOneRadio value="#{myBean.specificField}"/> component
instead of a
<h:selectOneCheckbox value="#{myBean.specificField}"/> component?
Greetz
Marwief

Answer 1 :
EL JSF expressions are allowed in the last JSF versions. So it can be put without any wrapping tag (like <h:outputText />).
Using this <h:outputLabel value="#{bean.car.name}" /> did not give result, because you did not specify for attribute to point to, in order to be rendered as label of its client id, which means, it cannot be used alone.
Answer 2 :
First, this JSF tag <h:selectOneCheckbox /> doesn't exist, maybe you wanted to mean <h:selectBooleanCheckbox />. Replacing this by <h:selectOneRadio ... /> does not look very well, because this last one needs <f:selectItem /> or <f:selectItems /> to hold choices from where the end user will be able to choose between (i.e at least 2 choices), in the contrary of <h:selectBooleanCheckbox /> which can have no child select item(s) tag(s) in the case of one alone choice to (un)check.

Failed validation during AJAX form submission breaks AJAX

Okay, so I have read through stackoverflow and various other portions of the net for a few days, and have not found a solution yet that fixes my issue.
Basically, I have an h:form in a p:dialog with two required fields. When the fields are both filled in, the form successfully submits and the dialog closes. When either or both fields are left blank, required field validation fails and updates the h:messages component in the p:dialog with the appropriate required messages. However, also when validation fails, the AJAX call seems to never "finish" and prevents subsequent calls from being executed. This is seen evident by my p:ajaxStatus component never disappearing from the screen, indicating that something is hanging somewhere. This is remedied by refreshing the page, at which point all other AJAX components begin to function again.
Additionally, I will note that this p:dialog is in a ui:define in a ui:composition, that dumps it into a master template. It is not nested within another h:form.
<p:dialog id="dlgDecision"
header="Decision"
widgetVar="dialogDecision"
modal="false"
resizable="false"
appendToBody="true">
<h:form id="fDlgDecision">
<h:messages id="msgDlgDecision" binding="#{msgform.messages}" errorClass="errormsg" infoClass="infomsg1" layout="table"/>
<h:outputFormat rendered="#{studentdetailsform.decisionAction == 'A'}">
<h:outputText value="Select an accept and admit code."/>
</h:outputFormat>
<h:outputFormat rendered="#{studentdetailsform.decisionAction == 'C'}">
<h:outputText value="Select a cancel and reason code."/>
</h:outputFormat>
<h:panelGrid columns="1">
<h:selectOneMenu id="apdcCode"
value="#{studentDetails.apdcCode}"
required="true"
requiredMessage="Please choose a decision code.">
<f:selectItem itemLabel="Select Decision Code"/>
<f:selectItems value="#{apdcCodes.apdcCodeList}"
var="apdc"
itemValue="#{apdc.apdcCode}"
itemLabel="#{apdc.apdcCode} - #{apdc.apdcDesc}"/>
</h:selectOneMenu>
<h:selectOneMenu id="admtCode"
value="#{studentDetails.admtCode}"
required="#{studentdetailsform.decisionAction == 'A'}"
requiredMessage="Please choose an admit code."
rendered="#{studentdetailsform.decisionAction == 'A'}">
<f:selectItem itemLabel="Select Admit Code"/>
<f:selectItems value="#{admtCodes.admtCodeList}"
var="admt"
itemValue="#{admt.admtCode}}"
itemLabel="#{admt.admtCode} - #{admt.admtDesc}"/>
</h:selectOneMenu>
<h:selectOneMenu id="wrsnCode"
value="#{studentDetails.wrsnCode}"
required="#{studentdetailsform.decisionAction == 'C'}"
requiredMessage="Please choose a reason code."
rendered="#{studentdetailsform.decisionAction == 'C'}">
<f:selectItem itemLabel="Select Reason Code"/>
<f:selectItems value="#{wrsnCodes.wrsnCodeList}"
var="wrsn"
itemValue="#{wrsn.wrsnCode}"
itemLabel="#{wrsn.wrsnCode} - #{wrsn.wrsnDesc}"/>
</h:selectOneMenu>
<p:commandButton id="decisionSubmit"
value="Submit Decision"
type="submit"
action="#{mainform.saveDecision}"
ajax="true"
partialSubmit="true"
process="#form"
update="#form msgDlgDecision"
oncomplete="if (!args.validationFailed) dialogDecision.hide()"/>
</h:panelGrid>
</h:form>
</p:dialog>
Some things I have already done in my debugging and troubleshooting:
- Moved the h:form into the p:dialog
- Made the backing bean with the values for the rendered attribute on the required fields ViewScoped (was having an issue with only some of the required messages showing, this resolved this problem)
- Added appendToBody="true" to p:dialog
- Added if (!args.validationFailed) to the oncomplete event of p:dialog
- Tried making the required fields NOT conditional (removed rendered attributes) to be sure this wasn't being caused by failed validation on non-rendered components (grasping at straws...)
EDIT: Here is a console dump from Chrome. Javascript error gets thrown when submitting the form with null required fields.
Uncaught SyntaxError: Unexpected token { jquery.js:14
bG.extend.parseJSON jquery.js:14
PrimeFaces.ajax.AjaxUtils.handleResponse primefaces.js:1
PrimeFaces.ajax.AjaxResponse primefaces.js:1
j.success primefaces.js:1
bZ jquery.js:14
b7.fireWith jquery.js:14
ca jquery.js:21
bZ
EDIT 2: Below are the only two JavaScript imports, both of which are in my template that is applied to the page via the ui:define and ui:composition mentioned above.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<script type="text/javascript" src="#{request.contextPath}/resources/scripts/jscript.js" />
The first import will force Primefaces to import jQuery into the page, even if there are no components on the page that utilize JavaScript. This is to allow my custom scripts in jscript.js to use jQuery reliably.
Other information:
JSF 2.1
Primefaces 3.4.2
Tomcat 6.0

Don't import jQuery.js manually as this is already done implicitly by PrimeFaces (it uses jQuery under the hood). You can remove that line.
Also you should see some examples of importing your custom js files with h:outputScript like this for example:
<h:outputScript library="scripts" name="jscript.js" />
but this is probably not reason of your problem, this is just hint for better JSF design.

A similar error showed up in Google Chrome, today, after I downloaded PrimeFaces 4.0 snapshot (2013-05-09) and tested my app.
Basically, I had to remove single quotes from data sent from bean to p:schedule via JSON. Since the error mentioned 'parse JSON' and "unexpected '" (unexpected single quote), I went to the datatable view of my data (instead of p:schedule) and recognized that some of the data had single quotes embedded. So, I removed the single quotes from the data, and that solved the issue for me.
Please click forum topic URL below.
PF 4.0 SNAPSHOT 2013-05-09: schedule not working

I've had the exact same problem at my application. The real problem was a duplicate jar problem.
I've had two primefaces jar in my application, one under the WEB-INF/lib directory, and the other under the ear/lib directory. Once I deleted the one under the WEB-INF, everything started to work as expected.
You could find the solution on the net via a search for the js exception.

post-constructor calls many times

in a brief word here is the problem
when i value change of the menu it execute the post-constructor again in backing bean then execute method fillAreas and i used view scope .
<p:selectOneMenu id="governate" value="#{add.selectedGovern}" style="height:26px; text-align: right; width: 303px;"
valueChangeListener="#{add.fillAreas}" rendered="#{languageBean.isDefaultLanguage==true}" immediate="true" >
<f:selectItem itemLabel="---#{prompts._select} ---" itemValue="0"/>
<f:selectItems value="#{add.governrateList}" var="govern" itemLabel="#{govern.governrateName}" itemValue="#{govern.governrateId}" />
<f:ajax immediate="true"/>
</p:selectOneMenu>
what can i do to prevent calling post-constructor ? and if post-constructor called once why it called every time i select from menu ?
Thanks in advance .

A view scoped bean will be recreated on every single request when a property of it is been bound to an attribute of a taghandler (JSTL <c:forEach>, Facelets <ui:include>, JSF <f:validateXXX>, etc) or to the binding or id attribute of a JSF UI component (<h:someComponent>, etc).
This is related to JSF issue 1492. You could solve it by disabling the partial state saving for the specific view, or by looking for alternate ways to achieve the desired functional requirement.
See also:
Communication in JSF 2.0 - #ViewScoped fails in taghandlers

How to specify the order in which a rich:extendedDataTable selection and h:selectOneMenu value are applied

I'm working on an application that's basically a customised database administration tool.
The page structure is basically the following:
<a4j:region>
<h:selectOneMenu value='#{bean.selectedTable}'>
...
<a4j:ajax event='change' render='tablePanel'/>
</h:selectOneMenu>
<a4j:outputPanel id='tablePanel'>
<rich:extendedDataTable id='table' selection='#{bean.selectedRows}' ...>
<f:facet name='header'>
[datascroller etc.]
<a4j:commandButton action='#{bean.deleteSelectedRows}' execute='#region' render='tablePanel'/>
</f:facet>
[columns]
</rich:extendedDataTable>
</a4j:outputPanel>
<a4j:region>
The selectOneMenu is used to choose which database table will be displayed. The backing bean is request scoped and set up to pick the first available table as a default when it's initialised. I'm using an ExtendedDataTable subclass to paginate data in the database.
When I click the commandButton to delete the rows, it seems that the extendedDataTable component determines the selected rows /before/ the value of bean.selectedTable is applied. This means that no matter what table is selected in the dropdown menu, RichFaces tells me the selected rows are some (more or less arbitrary) rows in the default database table.
I verified that this is an ordering problem, when deleteSelectedRows() is called the value of selectedTable is correct. I'm using Richfaces 4 M6, and a4j:keepAlive doesn't seem to be there anymore to preserve the bean state.
Is there a way to tell RichFaces / JSF in which order to do these things? I tried using immediate="true" on the h:selectOneMenu but that didn't help.
Also, after a delete, the tablePanel doesn't seem to be rerendered, while another a4j:commandButton that adds new records with the same execute and render attributes seems to work fine. Is there a way to debug the state of RichFaces ajax requests / hook into them via events?