Lock a button inside a datatable in the primefaces

Asked

Viewed 1,020 times

1

I have the following problem, I own a dataTable which contains the possibility of editing the data by editing by line, using the tag rowEditor and cellEditor. Next to this I have a button to delete that line. When I click the edit button I would lock the delete button, not to allow the user who during editing use this button and others, but the main focus is the delete button.

I tried to use the events of dataTable with ajax but this is not possible. Someone tells me some way out of such a problem?

This datatable this within a form with id="form" and a panelgroup encompassing another datatable that I intend to implement the same functionality.

How can I accomplish such a fact and if I can...

<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" listener="#{tabelaTaxaBean.setBotaoDesativado(true)}" update="btnExcluirFaixaCorrente"/>
    <p:ajax event="rowEdit" update=":form:messages"/>
    <p:ajax event="rowEditCancel" listener="#{tabelaTaxaBean.setBotaoDesativado(false)}" update="btnExcluirFaixaCorrente"/>

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

    <p:column headerText="Prazo (em meses)">
        <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">
        <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">
        <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">
        <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">
        <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" style="width: 7%"
        styleClass="coluna-acao">
        <p:rowEditor />
        &nbsp;
        <p:commandButton id="btnExcluirFaixaCorrente" process="@this" styleClass="botaoImagem"
            icon="botaoExcluir" title="Excluir" disabled="#{tabelaTaxaBean.botaoDesativado}"
            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>

2 answers

2

Use the Client Side API of the commandButton component through the attribute widgetVar to disable its buttons using only Avascript. In your commandButton

<p:commandButton ... widgetVar="botao1" />

and in the ajax tag:

<p:ajax event="rowEditInit" oncomplete="botao1.disable()" />
<p:ajax event="rowEditCancel" oncomplete="botao1.enable()" />

if you want to perform some action on the server side listeners of these events receive the class org.primefaces.event.RowEditEvent as a parameter.

  • Dude there was a user who suggested the same, but do not know why, when I click on line 1 it does not block, but if I click on line 2 works normal. And another problem I saw, if I edit a value but one of the fields is required, the validation of the JSF bar to save, but then the delete button is unlocked.

  • 1

    @Macario1983 It was my answer, but I excluded it because you said you already solved only with jQuery would post your solution, remember?

  • @filipeportes Welcome to [en.so]! It is a pleasure to have you here participating in the community. Hug.

  • Because it’s expensive, I would like to apologize because my code works almost like your suggestion, but it gave this above mentioned problem, kkkkk, but the problem is the following as I mentioned above, if a validation happens in the fields while editing, and does not pass, the button is unlocked.

  • Thank you for the welcome!!

  • @filipeportes you will try to show another solution?

  • I’m a bit rushed to assemble an environment and test, but I suggest you keep trying with the idea of a listner that alters a Boolean, and this is tied to disable of commandButton.

Show 2 more comments

0

Yeah, I got!

Takes up the duties in js or jQuery.

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

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

How to call on the page

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.