Question

I have developed a composite component as follows…

<composite:implementation>   
        <div class="numericBox">
            <h:inputText id="txtInput"
                         size="#{cc.attrs.maxLength}"
                         converterMessage="#{cc.attrs.converterMessage}"
                         validatorMessage="#{cc.attrs.validatorMessage}"
                         required="#{cc.attrs.required}"
                         requiredMessage="#{cc.attrs.requiredMessage}"
                         minlength="#{cc.attrs.minLength}"
                         maxlength="#{cc.attrs.maxLength}"
                         value="#{cc.attrs.value}">
                <f:ajax event="blur" render="@this err"/>
                <f:ajax event="blur" render="#{cc.attrs.renderParent}" disabled="#{empty cc.attrs.renderParent}"/>
            </h:inputText>
        </div>
        <h:panelGroup id="err">
            <utils:fieldError_right id="errText" group="#{cc.clientId}-txtInput"/>
        </h:panelGroup>
    </div>
</composite:implementation>

And I have a command button like below..

<h:commandButton id="btnNext" styleClass="btnNext" action="#{someBean.next}"/>

Now I am using the component in the following way…(just showing the bare bone representation)

 <util:numericInput label="Label" value="#{somebean.number}"
                           maxLength="2" optional="true" renderParent="-vehVal"

/>

    <h:panelGroup id="vehVal">
    <util:amountInput label="label2" value="#{someBean.nubmer2}"                    
                     rendered="#{someBean.number > 0}"
                     required="#{someBean.number > 0}" />
    </h:panelGroup>

So basically I want to render the “amountInput” component when ever user has entered some value > 0 in the “numericInput” component.
It works fine when I enter some value in the first field and click some where in the browser. But if I enter some value in the field and click on the next button directly it takes me to the next page, without validation (rendering) the next field.
All I can understand is the onBlur event is not fired when I click on the next button. Why ?? Is there any solution??

Answer 1

It may be that the event is fired, but the form is also being submitted, so the next view will be rendered and you’ll miss the result of the ajax event.

You may have to use a more immediate event than blur, such as keyup. Additionally, you could conditionally disable the button if someBean.number is > 0 and someBean.number2 is empty.