Merge pull request #367 from helloenvoy/remote-button-disable-with

add disable-with support for standalone remote buttons

Author: lucasmazza

src/rails.js

@@ -51,6 +51,9 @@
     // Link onClick disable selector with possible reenable after remote submission
     linkDisableSelector: 'a[data-disable-with]',
 
+    // 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');
@@ -199,25 +202,33 @@
     */
     disableFormElements: function(form) {
       rails.formElements(form, rails.disableSelector).each(function() {
-        var element = $(this), method = element.is('button') ? 'html' : 'val';
-        element.data('ujs:enable-with', element[method]());
-        element[method](element.data('disable-with'));
-        element.prop('disabled', true);
+        rails.disableFormElement($(this));
       });
     },
 
+    disableFormElement: function(element) {
+      var method = element.is('button') ? 'html' : 'val';
+      element.data('ujs:enable-with', element[method]());
+      element[method](element.data('disable-with'));
+      element.prop('disabled', true);
+    },
+
     /* Re-enables disabled form elements:
       - Replaces element text with cached value from 'ujs:enable-with' data store (created in `disableFormElements`)
       - Sets disabled property to false
     */
     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
@@ -293,7 +304,6 @@
       }
       element.unbind('click.railsDisable'); // enable element
     }
-
   };
 
   if (rails.fire($document, 'rails:attachBindings')) {
@@ -304,6 +314,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);
@@ -332,7 +346,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.js

@@ -22,14 +22,21 @@ module('data-disable', {
       href: '/echo',
       'data-disable-with': 'clicking...'
     }));
-    
+
     $('#qunit-fixture').append($('<input />', {
       type: 'submit',
       form: 'not_remote',
       'data-disable-with': 'form attr submitting',
       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');
@@ -293,3 +300,74 @@ asyncTest('ctrl-clicking on a link does not disables the link', 6, function() {
   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);
+});