Field and form validation using RichFaces

Question

I am trying to create a form where I would like to have immediate AJAX validation on the individual fields as well as process the whole form using AJAX

But I have encountered a problem with this approach for some components. For instance, the <o:dropDownField/> component from OpenFaces causes script errors, when it is rapidly reRendered several times after each other.

Using JSF 1.2, RichFaces 3.3.3.Final and OpenFaces 2.0.r13, the form could look something like:

<a4j:queue/>
<h:form>
    <h:panelGroup id="myForm">
        <f:facet name="aroundInvalidField">
            <s:div style="border: 2px solid red"/>
        </f:facet>
        <h:messages/>
        <h:panelGrid id="myGrid" columns="2">
            <s:decorate id="dropDownFieldDecorator">
                <o:dropDownField id="dropDownField"
                                 value="#{controller.library}"
                                 autoComplete="true">
                    <o:dropDownItem value="OpenFaces"/>
                    <o:dropDownItem value="RichFaces"/>
                    <a4j:support event="onchange"
                                 ajaxSingle="true"
                                 reRender="dropDownFieldDecorator"/>
                </o:dropDownField>
            </s:decorate>
            <a4j:commandButton value="Save"
                               action="#{controller.save}"
                               reRender="myForm"/>
        </h:panelGrid>
    </h:panelGroup>
</h:form>

If I write something in the input for the dropDownField (and leave the focus there) and then click the "Save" button, I will get two AJAX calls right after each other:

• one for the change event on the dropDownField, and
• one for the "Save" button.

At least in IE8 I will then most likely get a script error, stating that "O$.Tables._initColumns: colTags.length(0) != colCount(1)".

The problem seems to stem from the fact, that the javascript initialization of the <o:dropDownField> component "postpones" one or more steps, by wrapping them in a setTimeout().

So when the richfaces AJAX processor thinks that it has finished processing the first request, it will start processing the second request. But when the postponed steps start to execute, I will now have two sets of dropDownField initialization code trying to do their job at the same time - they step on each others toes and I get the script error...

Does anyone have any suggestions on how to avoid this problem?