Merge branch 'master' into data-disable

Conflicts:
	src/rails.js
	test/public/test/data-disable.js

Author: JangoSteve

src/rails.js

@@ -51,6 +51,9 @@
     // Link onClick disable selector with possible reenable after remote submission
     linkDisableSelector: 'a[data-disable-with], a[data-disable]',
 
+    // Button onClick disable selector with possible reenable after remote submission
+    buttonDisableSelector: 'button[data-remote][data-disable-with]',
+
     // Make sure that every Ajax request sends the CSRF token
     CSRFProtection: function(xhr) {
       var token = $('meta[name="csrf-token"]').attr('content');
@@ -189,7 +192,7 @@
     // If form is actually a "form" element this will return associated elements outside the from that have
     // the html form attribute set
     formElements: function(form, selector) {
-      return form.is('form') ? $(form[0].elements).filter(selector) : form.find(selector)
+      return form.is('form') ? $(form[0].elements).filter(selector) : form.find(selector);
     },
 
     /* Disables form elements:
@@ -199,19 +202,22 @@
     */
     disableFormElements: function(form) {
       rails.formElements(form, rails.disableSelector).each(function() {
-        var element, method, replacement;
+        rails.disableFormElement($(this));
+      });
+    },
 
-        element = $(this);
-        method = element.is('button') ? 'html' : 'val';
-        replacement = element.data('disable-with');
+    disableFormElement: function(element) {
+      var method, replacement;
 
-        element.data('ujs:enable-with', element[method]());
-        if (replacement !== undefined) {
-          element[method](replacement);
-        }
+      method = element.is('button') ? 'html' : 'val';
+      replacement = element.data('disable-with');
 
-        element.prop('disabled', true);
-      });
+      element.data('ujs:enable-with', element[method]());
+      if (replacement !== undefined) {
+        element[method](replacement);
+      }
+
+      element.prop('disabled', true);
     },
 
     /* Re-enables disabled form elements:
@@ -220,12 +226,16 @@
     */
     enableFormElements: function(form) {
       rails.formElements(form, rails.enableSelector).each(function() {
-        var element = $(this), method = element.is('button') ? 'html' : 'val';
-        if (element.data('ujs:enable-with')) element[method](element.data('ujs:enable-with'));
-        element.prop('disabled', false);
+        rails.enableFormElement($(this));
       });
     },
 
+    enableFormElement: function(element) {
+      var method = element.is('button') ? 'html' : 'val';
+      if (element.data('ujs:enable-with')) element[method](element.data('ujs:enable-with'));
+      element.prop('disabled', false);
+    },
+
    /* For 'data-confirm' attribute:
       - Fires `confirm` event
       - Shows the confirmation dialog
@@ -306,7 +316,6 @@
       }
       element.unbind('click.railsDisable'); // enable element
     }
-
   };
 
   if (rails.fire($document, 'rails:attachBindings')) {
@@ -317,6 +326,10 @@
         rails.enableElement($(this));
     });
 
+    $document.delegate(rails.buttonDisableSelector, 'ajax:complete', function() {
+        rails.enableFormElement($(this));
+    });
+
     $document.delegate(rails.linkClickSelector, 'click.rails', function(e) {
       var link = $(this), method = link.data('method'), data = link.data('params'), metaClick = e.metaKey || e.ctrlKey;
       if (!rails.allowAction(link)) return rails.stopEverything(e);
@@ -345,7 +358,15 @@
       var button = $(this);
       if (!rails.allowAction(button)) return rails.stopEverything(e);
 
-      rails.handleRemote(button);
+      if (button.is(rails.buttonDisableSelector)) rails.disableFormElement(button);
+
+      var handleRemote = rails.handleRemote(button);
+      // response from rails.handleRemote() will either be false or a deferred object promise.
+      if (handleRemote === false) {
+        rails.enableFormElement(button);
+      } else {
+        handleRemote.error( function() { rails.enableFormElement(button); } );
+      }
       return false;
     });
 

test/public/test/data-disable-with.js

@@ -31,6 +31,13 @@ module('data-disable-with', {
       name: 'submit3',
       value: 'Form Attr Submit'
     }));
+
+    $('#qunit-fixture').append($('<button />', {
+      text: 'Click me',
+      'data-remote': true,
+      'data-url': '/echo',
+      'data-disable-with': 'clicking...'
+    }));
   },
   teardown: function() {
     $(document).unbind('iframe:loaded');
@@ -275,3 +282,74 @@ asyncTest('ctrl-clicking on a link does not disables the link', 6, function() {
   App.checkEnabledState(link, 'Click me');
   start();
 });
+
+asyncTest('button[data-remote][data-disable-with] disables and re-enables', 6, function() {
+  var button = $('button[data-remote][data-disable-with]');
+
+  checkEnabledState(button, 'Click me');
+
+  button
+    .bind('ajax:send', function() {
+      checkDisabledState(button, 'clicking...');
+    })
+    .bind('ajax:complete', function() {
+      setTimeout( function() {
+        checkEnabledState(button, 'Click me');
+        start();
+      }, 15);
+    })
+    .trigger('click');
+});
+
+asyncTest('button[data-remote][data-disable-with] re-enables when `ajax:before` event is cancelled', 6, function() {
+  var button = $('button[data-remote][data-disable-with]');
+
+  checkEnabledState(button, 'Click me');
+
+  button
+    .bind('ajax:before', function() {
+      checkDisabledState(button, 'clicking...');
+      return false;
+    })
+    .trigger('click');
+
+  setTimeout(function() {
+    checkEnabledState(button, 'Click me');
+    start();
+  }, 30);
+});
+
+asyncTest('button[data-remote][data-disable-with] re-enables when `ajax:beforeSend` event is cancelled', 6, function() {
+  var button = $('button[data-remote][data-disable-with]');
+
+  checkEnabledState(button, 'Click me');
+
+  button
+    .bind('ajax:beforeSend', function() {
+      checkDisabledState(button, 'clicking...');
+      return false;
+    })
+    .trigger('click');
+
+  setTimeout(function() {
+    checkEnabledState(button, 'Click me');
+    start();
+  }, 30);
+});
+
+asyncTest('button[data-remote][data-disable-with] re-enables when `ajax:error` event is triggered', 6, function() {
+  var button = $('a[data-disable-with]').attr('data-remote', true).attr('href', '/error');
+
+  checkEnabledState(button, 'Click me');
+
+  button
+    .bind('ajax:send', function() {
+      checkDisabledState(button, 'clicking...');
+    })
+    .trigger('click');
+
+  setTimeout(function() {
+    checkEnabledState(button, 'Click me');
+    start();
+  }, 30);
+});

test/public/test/data-disable.js

@@ -21,6 +21,13 @@ module('data-disable', {
       href: '/echo',
       'data-disable': 'true'
     }));
+
+    $('#qunit-fixture').append($('<button />', {
+      text: 'Click me',
+      'data-remote': true,
+      'data-url': '/echo',
+      'data-disable-with': 'clicking...'
+    }));
   },
   teardown: function() {
     $(document).unbind('iframe:loaded');