Disable delete button in data table in Primefaces that is using rowEditor

Question

I have one datatable in my project that has editable property true and it uses rowEditor to edit values inside. So I put one button to delete this value, I thougth to block delete button when user start to edit one row. I´m using Jquery function to make this. But I had one problem, when the values are validate by Java Server Faces , the delete button is enabled. So I don´t know the best way to do it.

Data table code

<p:dataTable id="tabelaVigenciaCorrente" editable="true"
    value="#{tabelaTaxaBean.pojo.vigenciaCorrente.faixas}"
    emptyMessage="Adicione pelo menos uma faixa" var="corrente" 
    sortBy="prazoMinimo">

    <p:ajax event="rowEditInit" oncomplete="disableDataTableButtonExcluir();"/>
    <p:ajax event="rowEdit" update=":form:messages" oncomplete="enableDataTableButtonExcluir();"/>
    <p:ajax event="rowEditCancel" oncomplete="enableDataTableButtonExcluir();"/>

    <f:facet name="header">
        <div align="left">
            <p:outputLabel value="#{tabelaTaxaBean.cabecalhoVigenciaCorrente}" />
        </div>
    </f:facet>

    <p:column headerText="Prazo (em meses)" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel
                    value="#{corrente.prazoMinimo} a #{corrente.prazoMaximo}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Prazo inicial"
                    value="#{corrente.prazoMinimo}" size="8" maxlength="3"
                    onkeypress="mascara(this, soNumeros)" required="true" />
                &nbsp;&nbsp;
                <p:inputText label="Prazo final" value="#{corrente.prazoMaximo}"
                    size="8" maxlength="3" onkeypress="mascara(this, soNumeros)"
                    required="true" />
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Taxa de juros" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.taxaJuros}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Taxa de juros" value="#{corrente.taxaJuros}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6" required="true">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Taxa diferenciada para o banco/empresa" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.taxaDiferenciadaParaBanco}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>
                <p:outputLabel
                    value="#{corrente.taxaDiferenciadaParaBanco == null ? '' : '%'}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Taxa diferenciada para o banco/empresa"
                    value="#{corrente.taxaDiferenciadaParaBanco}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Comissão" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.comissao}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>

                <p:outputLabel value="%" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Comissão" value="#{corrente.comissao}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6" required="true">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Complemento" styleClass="columnRight">
        <p:cellEditor>
            <f:facet name="output">
                <p:outputLabel value="#{corrente.complementoComissao}">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:outputLabel>

                <p:outputLabel
                    value="#{corrente.complementoComissao == null ? '' : '%'}" />
            </f:facet>

            <f:facet name="input">
                <p:inputText label="Complemento"
                    value="#{corrente.complementoComissao}"
                    onkeypress="mascara(this,valorMonetario)" size="11"
                    maxlength="6">
                    <f:convertNumber locale="pt_BR" minFractionDigits="2"
                        maxFractionDigits="2" />
                </p:inputText>
            </f:facet>
        </p:cellEditor>
    </p:column>

    <p:column headerText="Ação" styleClass="coluna-acao">
        <p:rowEditor/>
        &nbsp;
        <p:commandButton id="btnExcluirFaixaCorrente" process="@this" disabled="false"
            styleClass="botaoImagem" icon="botaoExcluir" title="Excluir"
            oncomplete="confirmationFaixaExclusao.show()">
            <f:setPropertyActionListener
                target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            <f:setPropertyActionListener target="#{tabelaTaxaBean.faixa}"
                value="#{corrente}" />
        </p:commandButton>
    </p:column>

    <f:facet name="footer">
        <div align="right">
            <p:commandButton
                disabled="#{tabelaTaxaBean.pojo.vigenciaCorrente == null}"
                process="@this" value="Adicionar faixa"
                update=":dialogAdicionarFaixa" oncomplete="dlgFaixa.show();"
                action="#{tabelaTaxaBean.criarFaixa}" >
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
            &nbsp;&nbsp;
            <p:commandButton process="@this" update=":dialogVigencia"
                oncomplete="dlgVigencia.show()" value="Editar vigência"
                action="#{tabelaTaxaBean.editarVigencia}"
                disabled="#{(tabelaTaxaBean.pojo.vigenciaCorrente == null) || (tabelaTaxaBean.pojo.vigenciaProxima != null)}" >
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
            &nbsp;&nbsp;
            <p:commandButton process="@this" update=":dialogVigencia"
                oncomplete="confirmationVigenciaExclusao.show()"
                value="Excluir vigência"
                disabled="#{(tabelaTaxaBean.pojo.vigenciaCorrente == null) || (tabelaTaxaBean.pojo.vigenciaProxima != null)}">
                <f:setPropertyActionListener
                    target="#{tabelaTaxaBean.vigenciaTipo}" value="corrente" />
            </p:commandButton>
        </div>
    </f:facet>
</p:dataTable>

My functions

  function disableDataTableButtonExcluir() {
      if ($('span.ui-icon.ui-icon-pencil').is(':hidden')) {
          $('span.ui-button-icon-left.ui-icon.ui-c.botaoExcluir').prop("disabled", true).addClass('ui-state-disabled');     
      }
  }

  function enableDataTableButtonExcluir() {

      if ($('tr.ui-widget-content.ui-row-editing.ui-state-error.ui-datatable-even').length == 0) {            
          if (!$('span.ui-icon.ui-icon-pencil').is(':hidden')) {
              $('button[id*="btnExcluirFaixa"]').removeAttr("disabled").removeClass('ui-state-disabled');;      
          }
      }
  }

So what can I do?

Answer 1

You can use p:commandButton 's client side API function to enable disable button from Javascript.

Example:

<p:commandButton widgetVar="myCmdBtn"/>

To Disable from Javascript use:

myCmdBtn.disable();

To Enable from Javascript use:

myCmdBtn.enable();

Answer 2

I done!

First I created two methods to enable and disable these buttons.

function disableBtnCorrenteExcluir() {
    $('button[id*="tabelaVigenciaCorrente"]').prop('disabled', true).addClass('ui-state-disabled');
}

function enableBtnCorrenteExcluir() {
    $('button[id*="tabelaVigenciaCorrente"]').removeClass('ui-state-disabled');
}

So I with these code above I get all buttons with id partial matching tabelaVigenciaCorrente and add class Jquery Ui to make possible to disable . And the second method I remove this class.

<p:ajax event="rowEditInit" onstart="disableBtnCorrenteExcluir();" />
<p:ajax event="rowEdit" oncomplete="if (args.validationFailed) disableBtnCorrenteExcluir(); else enableBtnCorrenteExcluir();" />
<p:ajax event="rowEditCancel" oncomplete="enableBtnCorrenteExcluir();" />

And I call theses methods like above. In the event rowEdit I need to check if JSF validation throws . Because the button can be unlocked.

In my code I use datatable editable with cellEditor .

Thanks