0

Possuo uma tela de adicionar membros e quando o membro é adicionado o usuário já visualiza em uma tabela abaixo (AJAX).

Quando os usuários estão clicando no botão adicionar a requisição pode demorar, dependendo de "N" fatores, e quando demora, os usuários continuam clicando no botão de adicionar, o que acarreta em várias inserções e vários registros "idênticos" na tabela.

Eu quero simplesmente dar um disable no botão enquanto a requisição é finalizada e a tabela atualizada, porém não manjo muito de JS.

Meu código:

$('form#{$model->formname()}').on('beforeSubmit', function(e)
{

    var \$form = $(this);

    $.post(
        \$form.attr("action"),
        \$form.serialize(),
    ).done(function(result){  
        $.pjax.reload({container:'#membros'});
        $(\$form).trigger("reset");
    }).fail(function(){
        $(\$form).trigger("reset");
        $.pjax.reload({container:'#membros'});
    }); 

    return false;
});

2 Respostas 2

2

Você pode fazer desta forma:

$('form#{$model->formname()}').on('beforeSubmit', function(e)
{

    var \$form = $(this);
    var botao = $('#id_do_seu_botao');

    botao.prop('disabled', true);

    $.post(
        \$form.attr("action"),
        \$form.serialize(),
    ).done(function(result){  
        $.pjax.reload({container:'#membros'});
        $(\$form).trigger("reset");
        botao.prop('disabled', false);
    }).fail(function(){
        $(\$form).trigger("reset");
        $.pjax.reload({container:'#membros'});
        botao.prop('disabled', false);
    }); 

    return false;
});

Assim antes da requisição ele desabilita o botão, e no termino da requisição ele o habilita.

1
  • Deu certo aqui. Vlw mesmo :) 10/01/2019 às 0:02
-1

Substitua sua requisição para $.ajax. Nela temos as funções:

beforeSend: essa função é executada antes de ser realizada a requisição AJAX, no seu caso, aqui devemos desabilitar o botão.

success: essa função é executada caso a requisição AJAX tenha sido executada pelo back-end com sucesso.

error: essa função é executada caso ocorra alguma falha na requisição do back-end.

complete: essa função é executada depois do success ou do error (depende se sua requisição foi realizada com sucesso para chamar uma das duas). No seu caso, iremos usar essa função para habilitar o botão novamente.

var \$form = $(this);

$.ajax({
    type: 'POST',
    url: \$form.attr("action"),
    data: \$form.serialize(),
    dataType: 'json',
    beforeSend: function() {
        // Aqui desativamos seu botão, troque para o id correto
        $('#id-botao').attr('disabled', 'disabled');
    },
    success: function(result) {
        $.pjax.reload({container:'#membros'});
        $(\$form).trigger("reset");
    },
    error: function(xhr) { 
        $(\$form).trigger("reset");
        $.pjax.reload({container:'#membros'});
    },
    complete: function() {
        // Aqui habilitamos seu botão, troque para o id correto
        $('#id-botao').removeAttr('disabled');
    }
});
1
  • 1
    Vale lembrar-te que o perguntante utiliza uma versão mais recente da biblioteca do jQuery. Seu exemplo não compete com a pergunta. A teoria sim poderia ser considerada, mas o código não. Propriamente dito, seu código forçaria o perguntante a "atrasar" a versão da biblioteca dele. Veja mais em jQuery - ajax(): Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
    – LipESprY
    9/01/2019 às 23:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .