JSF enable/disable commandLink depending on filling two inputText and boolean flag without javaScript

Question

I am trying to enable/disable a commandLink depending more than one condition.

At the beginning the commandLink is disabled. To enable it, I must click on a commandButton that activates a boolean flag (this point is currently working) and two inputText must be filled.

CommandLink:

<p:commandLink id="buttonGuardar" action="#{vinculacionesGestionDetalleController.buttonGuardar}" update="@form" process="@form" styleClass="fa-commandlink fa-floppy-o" immediate="true" disabled="#{vinculacionesGestionDetalleController.flagGuardar and empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas and empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}">

  <h:outputText value="#{msg.guardar}" />
</p:commandLink>

commandButton that returns a boolean flag from the controller:

<p:commandButton id="validacionesValidarCodigoButton" actionListener="#{vinculacionesGestionDetalleController.buttonValidar}" value="Validar" styleClass="searchButton" icon="fa fa-button fa-check-circle" process="@form" style="margin-left: 20px;" update="buttonGuardar">
</p:commandButton>

inputText:

<p:row>
  <p:column styleClass="alignTextRight">
    <h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionCas}" for="inputDenominacionCas" />
  </p:column>
  <p:column>
    <p:inputText id="inputDenominacionCas" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas}" />
  </p:column>
</p:row>

<p:row>
  <p:column styleClass="alignTextRight">
    <h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionVal}" for="inputDenominacionVal" />
  </p:column>
  <p:column>
    <p:inputText id="inputDenominacionVal" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}" />
  </p:column>
</p:row>

As you can see, I have tried using more than two conditions on disable property of commandLink:

disabled="#{vinculacionesGestionDetalleController.flagGuardar and not empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas and not empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}"

But it is not working.

Does your 'disabled' EL show the expected values when just used as the value of an h:outputText? — Kukeltje
You must use ajax listener that will listen to the changes on inputTexts and then will update the commandLink. — sunofkyuss
@Kukeltje do you mean that? <h:outputText value="#{{vinculacionesGestionDetalleController.flagGuardar and not empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas and not empty vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}" /> — D.Gallego

sunofkyuss sunofkyuss · Accepted Answer · 2017-01-17T22:04:57

Firstly, logical operations that in "disabled" attribute are wrong. As I understood, you want to enable the link when flag is true and inputTexts are not empty.

enabled="#{flag and not empty inputText1 and not empty inputText2}"

Oh no, commandLink doesn't have enabled attribute. No problem:

disabled="#{not (flag and not empty inputText1 and not empty inputText2)}"

Now the changes at the values of inputTexts must trigger an ajax event that will update the commandLink.

<p:row>
  <p:column styleClass="alignTextRight">
    <h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionCas}" for="inputDenominacionCas" />
  </p:column>
  <p:column>
    <p:inputText id="inputDenominacionCas" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionCas}" >
        <p:ajax event="keyup" update="buttonGuardar"/> 
    </p:inputText>
  </p:column>
</p:row>

<p:row>
  <p:column styleClass="alignTextRight">
    <h:outputLabel value="#{msg.vinculaciones_gestion_detalle_denominacionVal}" for="inputDenominacionVal" />
  </p:column>
  <p:column>
    <p:inputText id="inputDenominacionVal" style="width:100%" value="#{vinculacionesGestionDetalleController.vinculacionLaboral.denominacionVal}" >
        <p:ajax event="keyup" update="buttonGuardar"/> 
    </p:inputText>
  </p:column>
</p:row>

If you want ajax event get triggered only when inputText lose focus, you can use "blur" event instead of "keyup".

JSF enable/disable commandLink depending on filling two inputText and boolean flag without javaScript

1 Answers