summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorAzul <azul@leap.se>2014-04-23 16:54:40 +0200
committerAzul <azul@leap.se>2014-04-25 12:18:40 +0200
commite727d211630591a3aaed5eba0eb50c7d4964b6f8 (patch)
treef9cbbadfe6fe7bdb9354fdb0d3e43ffbce30c1dd /app
parent6c13d3323c180a333fd0f32d17a62adce9fcf2bb (diff)
ensure buttons are properly loading... and reset
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/application.js1
-rw-r--r--app/assets/javascripts/buttons.js39
-rw-r--r--app/assets/javascripts/users.js21
3 files changed, 43 insertions, 18 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index ab07e1f..9af373d 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -20,3 +20,4 @@
//= require platform
//= require tickets
//= require users
+//= require buttons
diff --git a/app/assets/javascripts/buttons.js b/app/assets/javascripts/buttons.js
new file mode 100644
index 0000000..7142957
--- /dev/null
+++ b/app/assets/javascripts/buttons.js
@@ -0,0 +1,39 @@
+/*
+ * Buttons.js
+ *
+ * Use bootstrap loading state after submitting a form.
+ *
+ * Some form inputs are validaded before the submission
+ * so triggering loading state on click events is not a
+ * good idea. If the validation fails the errors will
+ * be displayed but the button would be in loading state.
+ *
+ * We used to trigger it based on form submission but
+ * we have a few forms that contain multiple buttons.
+ * So now we mark the buttons as clicked on click and
+ * put the clicked button into loading state on submit.
+ *
+ */
+
+(function() {
+ markAsClicked = function () {
+ var btn = $(this)
+ btn.addClass('clicked')
+ setTimeout(function () {
+ btn.removeClass('clicked')
+ }, 1000)
+ };
+
+ markAsLoading = function(submitEvent) {
+ var form = submitEvent.target;
+ $(form).addClass('submitted')
+ // bootstrap loading state:
+ $(form).find('.btn.clicked[type="submit"]').button('loading');
+ };
+
+ $(document).ready(function() {
+ $('form').submit(markAsLoading);
+ $('.btn[type="submit"]').click(markAsClicked);
+ });
+
+}).call(this);
diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
index 8486756..4a86ef5 100644
--- a/app/assets/javascripts/users.js
+++ b/app/assets/javascripts/users.js
@@ -35,24 +35,10 @@
data: $(form).serialize()
});
req.done( function() {
- $(form).find('input[type="submit"]').button('reset');
+ $(form).find('.btn[type="submit"]').button('reset');
});
};
-
- markAsSubmitted = function(submitEvent) {
- var form = submitEvent.target;
- $(form).addClass('submitted')
- // bootstrap loading state:
- $(form).find('input[type="submit"]').button('loading');
- };
-
- resetButtons = function(submitEvent) {
- var form = $('form.submitted')
- // bootstrap loading state:
- $(form).find('input[type="submit"]').button('reset');
- $(form).removeClass('submitted')
- };
-
+
//
// PUBLIC FUNCTIONS
//
@@ -79,7 +65,7 @@
clear_errors();
var errors = extractErrors(message);
displayErrors(errors);
- resetButtons();
+ $('.btn[type="submit"]').button('reset');
}
function extractErrors(message) {
@@ -115,7 +101,6 @@
//
$(document).ready(function() {
- $('form').submit(markAsSubmitted);
$('#new_user').submit(prevent_default);
$('#new_user').submit(srp.signup);
$('#new_session').submit(prevent_default);