how to clear a form with 1 invalid field and ajaxSingle="tru

[jobor]

Hello,

I have a little search form with a few fields.
Only one field has the required attribute.
If you fill in nothing the required message appears.
So far so good.

But I tried to use a a4j:commandButton with the ajaxSingle="true" attribute to call the bean with an actionListener to clear the fields on the server and to redraw the search panel.
The backing bean is actually called without validation due to ajaxSingle="true" an the fields cleared.
But on the client happens nothing.
If I had some values in the other non required fields the values are still there on the client after the actionListener is invoked.

The only solution is to post the form again with a valid value for the one required field to release some sort of invalid state.
Then if I activate the clear button again everything works fine. The fields are cleared on the backend and are empty on the front end.

How can I release the some sort of invalid state so the fields on the front end reflect the empty values on the backend even the required field is not filled with a value?

T.I.A.
Johan Borchers

The JSF code of the search panel

<h:form id="search-form" style="margin: 0px;">
<div style="margin-left: auto; margin-right: auto;">
<table id="simple-search-fields">
 <tr>
 <td style="text-align: right; width: 100px;">
 <h:outputText value="Gidstitel:"/>
 </td>
 <td>
 <h:inputText value="#{productionHandler.filter.title}" required="true" style="width: 160px;"/>
 </td>
 <td>
 <a4j:commandLink id="do-complex-search" value="Uitgebreid zoeken" actionListener="#{productionHandler.displayComplexSearch}" reRender="search-panel" rendered="#{productionHandler.searchMode == 'simple'}"/>
 <a4j:commandLink id="do-simple-search" value="Simpel zoeken" actionListener="#{productionHandler.displaySimpleSearch}" reRender="search-panel" rendered="#{productionHandler.searchMode == 'complex'}"/>
 </td>
 </tr>
</table>
<a4j:outputPanel layout="block" rendered="#{productionHandler.searchMode == 'complex'}">
<table id="complex-search-fields">
 <tr>
 <td style="text-align: right; width: 100px;">
 <h:outputText value="Uitzenddatum van:"/>
 </td>
 <td style="width: 100px;">
 <rich:calendar value="#{productionHandler.filter.transmissionDateStart}"
 datePattern="dd-MM-yyyy"
 inputStyle="width: 70px;"/>
 </td>
 <td style="text-align: right; width: 100px;">
 <h:outputText value="Uitzenddatum t/m:"/>
 </td>
 <td style="width: 100px;">
 <rich:calendar value="#{productionHandler.filter.transmissionDateStop}"
 datePattern="dd-MM-yyyy"
 inputStyle="width: 70px;"/>
 </td>
 </tr>
 <tr>
 <td style="text-align: right; width: 100px;">
 <h:outputText value="Projectnummer van:"/>
 </td>
 <td style="width: 100px;">
 <h:inputText value="#{productionHandler.filter.projectNumberStart}" style="width: 70px;"/>
 </td>
 <td style="text-align: right; width: 100px;">
 <h:outputText value="Projectnummer t/m:"/>
 </td>
 <td style="width: 100px;">
 <h:inputText value="#{productionHandler.filter.projectNumberStop}" style="width: 70px;"/>
 </td>
 </tr>
</table>
</a4j:outputPanel>
</div>
<div style="margin-top: 8px; text-align: center; width: 100%">
 <a4j:commandButton value="Zoekopdracht uitvoeren" actionListener="#{productionHandler.selectProductions}" reRender="tree, detail-panel"/>
 <a4j:commandButton value="Zoekvoorwaarden wissen" actionListener="#{productionHandler.clearFilter}" ajaxSingle="true" reRender="search-panel"/>
</div>
</h:form>

The code on the bean to clear the search fields

public void clearFilter(ActionEvent e) {
 filter = new ProductionFilter();
}

[ilya_shaikovsky]

should help you
http://ishabalov.blogspot.com/2007/08/sad-story-about-uiinput.html

[jobor]

Yes this was helpful.

I do set bindings of the input fields to the backing bean in the fields:
filterField1, filterField2 etc.

In the backing bean action listener method I do the following:

public void clearFilter(ActionEvent e) {
 filter = new ProductionFilter();
 filterField1.setValue(null);
 filterField1.setSubmittedValue(null);
 filterField2.setValue(null);
 filterField2.setSubmittedValue(null);
 filterField3.setValue(null);
 filterField3.setSubmittedValue(null);
 filterField4.setValue(null);
 filterField4.setSubmittedValue(null);
 filterField5.setValue(null);
 filterField5.setSubmittedValue(null);
}

The command button looks like this:

<a4j:commandButton value="Zoekcriteria wissen" actionListener="#{productionHandler.clearFilter}" ajaxSingle="true" reRender="search-panel"/>

Now even a field is not valid the fields are cleared!

Johan