3

Estou utilizando os extensions methods @Ajax.BeginForm() para salvar os dados via AJAX. Para evitar que seja executado mais de um clique no botão submit, o que poderia causar um duplo insert no meu banco de dados, decidi incluir um pequeno trecho de código dentro do arquivo jquery.unobtrusive-ajax.js, que desabilita o botão submit.

Incluí o trecho de código logo depois das chamadas do método que exibe um loader, respectivamente loading.show(duration); e loading.hide(duration);.

Segue o método completo onde fiz a adição do meu código:

function asyncRequest(element, options) {
    var confirm, loading, method, duration;

    confirm = element.getAttribute("data-ajax-confirm");
    if (confirm && !window.confirm(confirm)) {
        return;
    }

    loading = $(element.getAttribute("data-ajax-loading"));
    duration = parseInt(element.getAttribute("data-ajax-loading-duration"), 10) || 0;

    $.extend(options, {
        context: element,
        type: element.getAttribute("data-ajax-method") || undefined,
        url: element.getAttribute("data-ajax-url") || undefined,
        beforeSend: function (xhr) {
            var result;
            asyncOnBeforeSend(xhr, method);
            result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments);
            if (result !== false) {
                loading.show(duration);
                $("form[data-ajax=true] :submit").attr('disabled', 'disabled').addClass('disabled'); //adicionado para evitar novo clique após submit
            }
            return result;
        },
        complete: function () {
            loading.hide(duration);
            $("form[data-ajax=true] :submit").removeAttr('disabled').removeClass('disabled'); //adicionado para evitar clique após submit
            getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(this, arguments);
        },
        success: function (data, status, xhr) {
            asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
            getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(this, arguments);
        },
        error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
    });

    options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

    method = options.type.toUpperCase();
    if (!isMethodProxySafe(method)) {
        options.type = "POST";
        options.data.push({ name: "X-HTTP-Method-Override", value: method });
    }

    $.ajax(options);
}

Os trechos que incluí:

loading.show(duration);
$("form[data-ajax=true] :submit").attr('disabled', 'disabled').addClass('disabled');

e:

loading.hide(duration);
$("form[data-ajax=true] :submit").removeAttr('disabled').removeClass('disabled');

Que adiciona e remove um atributo disabled="disabled" e uma class também disabled ao botão de submit logo após o elemento de loading é exibido e ocultado.

Isso funciona perfeitamente, o único problema é que como estou editando um código que a microsoft mantém, caso seja publicada uma nova versão do arquivo, vou perder meu código. Então minha dúvida é sobre se é possível criar um efeito similar, com alguma extensão desse arquivo, que pudesse ser escrita em um script à parte num arquivo separado.

2 Respostas 2

1

Analisando o código do jquery.unobstrusive-ajax.js, pude verificar que existem alguns pontos que podem ser estendidos, colocando atributos no form gerado pelo Ajax.BeginForm:

  • data-ajax-begin: este atributo pode apontar para uma função global, presenta na window, ou então conter o código javascript diretamente, que será executado antes de fazer a requisição ajax.

  • data-ajax-complete: este atributo pode apontar para uma função global, presenta na window, ou então conter o código javascript diretamente, que será executado quando o ajax se completar.

Dito isso, você pode criar funções a serem incluídas em um arquivo javascript assim:

function ajaxBegin()
{
    //adicionado para evitar novo clique após submit
    $("form[data-ajax=true] :submit").attr('disabled', 'disabled').addClass('disabled');
}

function ajaxComplete()
{
    //adicionado para evitar novo clique após submit
    $("form[data-ajax=true] :submit").attr('disabled', 'disabled').addClass('disabled');
}

E nesse mesmo arquivo javascript, já usar um método para alterar os forms gerados pelo método Ajax.BeginForm, que possuem convenientemente o atributo data-ajax="true":

$(function () {
    $("form[data-ajax=true]")
        .attr("data-ajax-begin", "ajaxBegin")
        .attr("data-ajax-complete", "ajaxComplete");
}

Feito isso, você terá de incluir este arquivo javascript em todas as páginas que quiser este comportamento:

  • você poderia colocar esse script no topo do arquivo jquery.unobtrusive-ajax.js da Microsoft (colocar código no topo é mais fácil que editar algo no meio do arquivo)

  • você pode colocar no arquivo _Layout.cshtml, caso você tenha um arquivo de layout

Ai fica ao seu critério, da melhor forma de incluir em todas as páginas.

0

Eu indicaria a você criar um arquivo .js para o seu site. No $(document).ready(function(){ ... }); coloque o seu trecho de código que não terá problemas caso a Microsoft atualize o arquivo nativo dela.

Você pode utilizar isso:

$(document).ajaxStart(function () {
       //Seu código quando a requisição inicia
    });
    $(document).ajaxStop(function () {
        //Seu código quando a requisição é finalizada
    });
2
  • Isso eu precisaria fazer em todos meus forms, a alteração do arquivo que fiz funciona em todos sem alterar nenhum arquivo específico. Essa é a ideia do unobtrusive.
    – iuristona
    Commented 10/03/2014 às 19:46
  • Você pode carregar este .js no seu arquivo de Layout do MVC, com isso todas as páginas que possuem este layout terão acesso às funções do document.ready(); Veja a edição que fiz na resposta, se você colocar o seu código de exibição do loading lá, pode funcionar. Commented 10/03/2014 às 19:48

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 .