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.