jsfblurajax4jsf

Blur event block submit button


I have a problem, please help me when i change a value in my input and then i submit a button the event blur block my submit, so i have to click twice on the button. I want that one click on my button do the action in my input and also submit my button

Same problem when in change value in my input and then i click on my commandLink .. the action of my blur event block the click on my link

<h:inputText id="idInputQuantite" readonly="#                                   
            converter="bigDecimalConverter"
            execute="@this"                                         
            styleClass="#{component.valid ? '' : 'invalidInput'}"
            style="#{component.valid ? '' : 'border: medium solid red;'};cursor:hand;"
            value="#{infoPiece.quantite}"                                   
            onfocus="if (this.readOnly) {this.blur();}>                                                
        <f:validator validatorId="superficieVolumeValidator" />
        <f:attribute name="libTypePiece" value="#{infoPiece.libPiece}" />                                   
     <a4j:ajax event="blur"  render="@form"  execute="@all"  
             listener="#{saisieEnquetesCtrl.contCohQuant}"
      oncomplete="modifyVal();updateOrigineQuant();focusErrorInput(); " />  

            </h:inputText>


<a4j:commandButton
            rendered="#{saisieMoisModel.modeModification}"
                action="#{saisieEnquetesCtrl.enregistrer}"
                id="idValider"
                value="Valider" 
                onmouseover="affichVerifPanel()"
                onmouseout="hideVerifPanel();mouseOut();"
                render="@form"
                execute="@this"
                oncomplete="saveOnglet();"

                style="margin-top:20px;margin-left:300px; background:#fadadc; font-family: Arial; font-weight: bold;">
            </a4j:commandButton>

       <a4j:commandLink style="float: right; padding-right: 40px;"
        render="@form" action="#{saisieEnquetesCtrl.clickChFerElementDebut}"
        onclick=" if (checkIfSaved()) {#{rich:component('savePopupDebut')}.show();return false;}" oncomplete="initTable();" ></a4j:commandLink> 

Solution

  • One solution would be to remove the <a4j:ajax event="blur" and add change <h:inputText into <h:inputText onblur="myFunc();"..... , while the myFunc will look like

    var myTimer;
    function myFunc() {
        myTimer= setTimeout(function () {
            $('#myHiddenButtonId').click();
        }, 500);
    }
    

    where myHiddenButtonId is an id of a <a4j:commandButton , something like this:

    <a4j:commandButton id="myHiddenButtonId" style="display:none;">
        <a4j:ajax render="@form"  execute="@all"  
             listener="#{saisieEnquetesCtrl.contCohQuant}"
      oncomplete="modifyVal();updateOrigineQuant();focusErrorInput(); " />  
    </a4j:commandButton>
    

    the above solution will work fine, but know that if you click on other ajax, your blur will fire afterwards...