From cf3fac481fcb08452dbaf86ee27f4f2014c01391 Mon Sep 17 00:00:00 2001 From: Yashika Garg Date: Thu, 8 Oct 2015 19:01:57 +0530 Subject: [PATCH 1/2] addSpiner and removeSpinner to prevent buttons from multiple submits --- js/api.js | 40 +++++++++++++++++++++------------------- js/helpers.js | 12 ++++++++++++ 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/js/api.js b/js/api.js index a5dbf89..bec2ec4 100644 --- a/js/api.js +++ b/js/api.js @@ -2,7 +2,7 @@ var Freya = Freya || {}; -Freya.get_popup = function (url, $button) { +Freya.get_popup = function (url, $button, currentButtonHtml) { // Ability to load popup via ajax url $.get(url).done(function (data, textStatus, jqXHR) { @@ -23,7 +23,7 @@ Freya.get_popup = function (url, $button) { }) .always(function () { if ($button !== undefined ) { - $button.prop('disabled', false); + Freya.removeSpinner($button, currentButtonHtml); } }); }; @@ -90,7 +90,7 @@ $(function () { var confirm = $button.attr('data-confirm'); //To prevent multisending - $button.prop('disabled', true); + var currentButtonHtml = Freya.addSpinner($button); function handle() { $.ajax({ @@ -102,7 +102,7 @@ $(function () { done_handler(data, textStatus, jqXHR, $button); }) .always(function () { - $button.prop('disabled', false); + Freya.removeSpinner($button, currentButtonHtml); }); } @@ -121,10 +121,10 @@ $(function () { $(document.body).on('change', 'form[data-api="ajax.autoreload"] :input', function (event) { event.preventDefault(); var $form = $(this).closest('form'); - var $submit = $form.find('input[type="submit"]'); + var $submit = $form.find('button[type="submit"]'); // To prevent multisending - $submit.prop('disabled', true); + var currentButtonHtml = Freya.addSpinner($submit); // Update URL if form.method == GET if ($form.attr('method') == 'GET') { @@ -147,7 +147,7 @@ $(function () { done_handler(data, textStatus, jqXHR, $form); }) .always(function () { - $submit.prop('disabled', false); + Freya.removeSpinner($submit, currentButtonHtml); }); } @@ -163,13 +163,13 @@ $(function () { //To prevent multisending if (!confirm) { - $button.prop('disabled', true); + var currentButtonHtml = Freya.addSpinner($button); } function handle() { - if (LocalStorage.get('conf.csrfToken')) { + if (csrfToken) { var setting = { beforeSend: function (xhr) { - xhr.setRequestHeader("X-CSRFToken", LocalStorage.get('conf.csrfToken')) + xhr.setRequestHeader("X-CSRFToken", csrfToken); }} } $.ajax($.extend(setting, { @@ -181,7 +181,9 @@ $(function () { done_handler(data, textStatus, jqXHR, $button); }) .always(function () { - $button.prop('disabled', false); + if(!confirm) { + Freya.removeSpinner($button, currentButtonHtml); + } }); } @@ -197,13 +199,14 @@ $(function () { }); // API for FORM that works by ajax - $(document.body).on('click', 'form[data-api="ajax.update"] input[type="submit"]', function (event) { + $(document.body).on('click', 'form[data-api="ajax.update"] button[type="submit"]', function (event) { event.preventDefault(); var $form = $(this).closest('form[data-api="ajax.update"]'); var formData = $form.serializeArray(); + var $button = $(this); // To prevent multisending - $(this).prop('disabled', true); + var currentButtonHtml = Freya.addSpinner($button); formData.push({ name: this.name, value: this.value }); formData.push({ name: 'next', value: document.URL }); @@ -216,7 +219,7 @@ $(function () { done_handler(data, textStatus, jqXHR, $form); }) .always(function () { - $(this).prop('disabled', false); + Freya.removeSpinner($button, currentButtonHtml); }); }); @@ -227,9 +230,8 @@ $(function () { var url = $button.attr('action'); // To prevent multisending - $button.prop('disabled', true); - - Freya.get_popup(url, $button); + var currentButtonHtml = Freya.addSpinner($button); + Freya.get_popup(url, $button, currentButtonHtml); }); // POPUP - FORM @@ -238,7 +240,7 @@ $(function () { //To prevent multisending var $button = $(this); - $button.prop('disabled', true); + var currentButtonHtml = Freya.addSpinner($button); var $form = $button.closest('form'); var $popup = $form.closest('.modal[data-api="ajax.popup"]'); @@ -276,7 +278,7 @@ $(function () { } }) .always(function () { - $button.prop('disabled', false); + Freya.removeSpinner($button, currentButtonHtml); }); }); }); diff --git a/js/helpers.js b/js/helpers.js index e328b55..cf6c459 100644 --- a/js/helpers.js +++ b/js/helpers.js @@ -72,6 +72,18 @@ Freya.sanitize_html = function(value, allowedTags) { }); }; +Freya.addSpinner = function($btn) { + $btn.prop("disabled", true); + var currentHTML = $btn.html(); + $btn.html(''); + return currentHTML; +}; + +Freya.removeSpinner = function($btn, previousHTML) { + $btn.prop("disabled", false); + $btn.html(previousHTML); +}; + // Tests for sanitize_html //var str, newstr; //var allowedTags = ['em', 'p', 'ul', 'ol', 'li', 'br', 'a', 'span', 'div', 'strong']; From 5b11d7decfef34c5c214d9e73ebee3ada609c7fd Mon Sep 17 00:00:00 2001 From: Yashika Garg Date: Fri, 9 Oct 2015 12:55:26 +0530 Subject: [PATCH 2/2] changed method names to enableSubmitButton/disableSubmitButton, introduced configs for change html and html, changed code for csrfToken --- js/api.js | 28 ++++++++++++++-------------- js/helpers.js | 21 +++++++++++++++------ 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/js/api.js b/js/api.js index bec2ec4..1a4544f 100644 --- a/js/api.js +++ b/js/api.js @@ -23,7 +23,7 @@ Freya.get_popup = function (url, $button, currentButtonHtml) { }) .always(function () { if ($button !== undefined ) { - Freya.removeSpinner($button, currentButtonHtml); + Freya.enableSubmitBtn($button, currentButtonHtml); } }); }; @@ -90,7 +90,7 @@ $(function () { var confirm = $button.attr('data-confirm'); //To prevent multisending - var currentButtonHtml = Freya.addSpinner($button); + var currentButtonHtml = Freya.disableSubmitBtn($button); function handle() { $.ajax({ @@ -102,7 +102,7 @@ $(function () { done_handler(data, textStatus, jqXHR, $button); }) .always(function () { - Freya.removeSpinner($button, currentButtonHtml); + Freya.enableSubmitBtn($button, currentButtonHtml); }); } @@ -124,7 +124,7 @@ $(function () { var $submit = $form.find('button[type="submit"]'); // To prevent multisending - var currentButtonHtml = Freya.addSpinner($submit); + var currentButtonHtml = Freya.disableSubmitBtn($submit); // Update URL if form.method == GET if ($form.attr('method') == 'GET') { @@ -147,7 +147,7 @@ $(function () { done_handler(data, textStatus, jqXHR, $form); }) .always(function () { - Freya.removeSpinner($submit, currentButtonHtml); + Freya.enableSubmitBtn($submit, currentButtonHtml); }); } @@ -163,13 +163,13 @@ $(function () { //To prevent multisending if (!confirm) { - var currentButtonHtml = Freya.addSpinner($button); + var currentButtonHtml = Freya.disableSubmitBtn($button); } function handle() { - if (csrfToken) { + if (LocalStorage.get('conf.csrfToken')) { var setting = { beforeSend: function (xhr) { - xhr.setRequestHeader("X-CSRFToken", csrfToken); + xhr.setRequestHeader("X-CSRFToken", LocalStorage.get('conf.csrfToken')) }} } $.ajax($.extend(setting, { @@ -182,7 +182,7 @@ $(function () { }) .always(function () { if(!confirm) { - Freya.removeSpinner($button, currentButtonHtml); + Freya.enableSubmitBtn($button, currentButtonHtml); } }); } @@ -206,7 +206,7 @@ $(function () { var $button = $(this); // To prevent multisending - var currentButtonHtml = Freya.addSpinner($button); + var currentButtonHtml = Freya.disableSubmitBtn($button); formData.push({ name: this.name, value: this.value }); formData.push({ name: 'next', value: document.URL }); @@ -219,7 +219,7 @@ $(function () { done_handler(data, textStatus, jqXHR, $form); }) .always(function () { - Freya.removeSpinner($button, currentButtonHtml); + Freya.enableSubmitBtn($button, currentButtonHtml); }); }); @@ -230,7 +230,7 @@ $(function () { var url = $button.attr('action'); // To prevent multisending - var currentButtonHtml = Freya.addSpinner($button); + var currentButtonHtml = Freya.disableSubmitBtn($button); Freya.get_popup(url, $button, currentButtonHtml); }); @@ -240,7 +240,7 @@ $(function () { //To prevent multisending var $button = $(this); - var currentButtonHtml = Freya.addSpinner($button); + var currentButtonHtml = Freya.disableSubmitBtn($button); var $form = $button.closest('form'); var $popup = $form.closest('.modal[data-api="ajax.popup"]'); @@ -278,7 +278,7 @@ $(function () { } }) .always(function () { - Freya.removeSpinner($button, currentButtonHtml); + Freya.enableSubmitBtn($button, currentButtonHtml); }); }); }); diff --git a/js/helpers.js b/js/helpers.js index cf6c459..abbabf4 100644 --- a/js/helpers.js +++ b/js/helpers.js @@ -1,6 +1,11 @@ "use strict"; var Freya = Freya || {}; +Freya.confs = { + changeSubmitButtonHTML: true, + submitButtonHTMLForAjaxInProcess: '' +}; + // Get real width and height even for hidden element Freya.getRealDimensions = function ($el, outer) { @@ -72,16 +77,20 @@ Freya.sanitize_html = function(value, allowedTags) { }); }; -Freya.addSpinner = function($btn) { +Freya.disableSubmitBtn = function($btn) { $btn.prop("disabled", true); - var currentHTML = $btn.html(); - $btn.html(''); - return currentHTML; + if(Freya.confs.changeSubmitButtonHTML) { + var currentHTML = $btn.html(); + $btn.html(Freya.confs.submitButtonHTMLForAjaxInProcess); + return currentHTML; + } }; -Freya.removeSpinner = function($btn, previousHTML) { +Freya.enableSubmitBtn = function($btn, previousHTML) { $btn.prop("disabled", false); - $btn.html(previousHTML); + if(Freya.confs.changeSubmitButtonHTML) { + $btn.html(previousHTML); + } }; // Tests for sanitize_html