Add support for the data-disable attribute.

src/rails.js

@@ -15,14 +15,14 @@
   if ( $.rails !== undefined ) {
     $.error('jquery-ujs has already been loaded!');
   }
-  
+
   // Shorthand to make it a little easier to call public rails functions from within rails.js
   var rails;
   var $document = $(document);
 
   $.rails = rails = {
     // Link elements bound by jquery-ujs
-    linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]',
+    linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with], a[data-disable]',
 
     // Button elements bound by jquery-ujs
     buttonClickSelector: 'button[data-remote], button[data-confirm]',
@@ -37,10 +37,10 @@
     formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type])',
 
     // Form input elements disabled during form submission
-    disableSelector: 'input[data-disable-with], button[data-disable-with], textarea[data-disable-with]',
+    disableSelector: 'input[data-disable-with], button[data-disable-with], textarea[data-disable-with], input[data-disable], button[data-disable], textarea[data-disable]',
 
     // Form input elements re-enabled after form submission
-    enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled',
+    enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled, input[data-disable]:disabled, button[data-disable]:disabled, textarea[data-disable]:disabled',
 
     // Form required input elements
     requiredInputSelector: 'input[name][required]:not([disabled]),textarea[name][required]:not([disabled])',
@@ -49,7 +49,7 @@
     fileInputSelector: 'input[type=file]',
 
     // Link onClick disable selector with possible reenable after remote submission
-    linkDisableSelector: 'a[data-disable-with]',
+    linkDisableSelector: 'a[data-disable-with], a[data-disable]',
 
     // Make sure that every Ajax request sends the CSRF token
     CSRFProtection: function(xhr) {
@@ -184,24 +184,32 @@
       form.hide().append(metadataInput).appendTo('body');
       form.submit();
     },
-    
-    // Helper function that returns form elements that match the specified CSS selector    
+
+    // Helper function that returns form elements that match the specified CSS selector
     // 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)
     },
-    
+
     /* Disables form elements:
       - Caches element value in 'ujs:enable-with' data store
       - Replaces element text with value of 'data-disable-with' attribute
       - Sets disabled property to true
     */
     disableFormElements: function(form) {
       rails.formElements(form, rails.disableSelector).each(function() {
-        var element = $(this), method = element.is('button') ? 'html' : 'val';
+        var element, method, replacement;
+
+        element = $(this);
+        method = element.is('button') ? 'html' : 'val';
+        replacement = element.data('disable-with');
+
         element.data('ujs:enable-with', element[method]());
-        element[method](element.data('disable-with'));
+        if (replacement !== undefined) {
+          element[method](replacement);
+        }
+
         element.prop('disabled', true);
       });
     },
@@ -278,8 +286,13 @@
     //  replace element's html with the 'data-disable-with' after storing original html
     //  and prevent clicking on it
     disableElement: function(element) {
+      var replacement = element.data('disable-with');
+
       element.data('ujs:enable-with', element.html()); // store enabled state
-      element.html(element.data('disable-with')); // set to disabled state
+      if (replacement !== undefined) {
+        element.html(replacement);
+      }
+
       element.bind('click.railsDisable', function(e) { // prevent further clicking
         return rails.stopEverything(e);
       });

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

@@ -0,0 +1,277 @@
+module('data-disable-with', {
+  setup: function() {
+    $('#qunit-fixture').append($('<form />', {
+      action: '/echo',
+      'data-remote': 'true',
+      method: 'post'
+    }))
+      .find('form')
+      .append($('<input type="text" data-disable-with="processing ..." name="user_name" value="john" />'));
+
+    $('#qunit-fixture').append($('<form />', {
+      action: '/echo',
+      method: 'post',
+      id: 'not_remote'
+    }))
+      .find('form:last')
+      // WEEIRDD: the form won't submit to an iframe if the button is name="submit" (??!)
+      .append($('<input type="submit" data-disable-with="submitting ..." name="submit2" value="Submit" />'));
+
+    $('#qunit-fixture').append($('<a />', {
+      text: 'Click me',
+      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'
+    }));
+  },
+  teardown: function() {
+    $(document).unbind('iframe:loaded');
+  }
+});
+
+asyncTest('form input field with "data-disable-with" attribute', 7, function() {
+  var form = $('form[data-remote]'), input = form.find('input[type=text]');
+
+  App.checkEnabledState(input, 'john');
+
+  form.bind('ajax:success', function(e, data) {
+    setTimeout(function() {
+      App.checkEnabledState(input, 'john');
+      equal(data.params.user_name, 'john');
+      start();
+    }, 13);
+  });
+  form.trigger('submit');
+
+  App.checkDisabledState(input, 'processing ...');
+});
+
+asyncTest('form button with "data-disable-with" attribute', 6, function() {
+  var form = $('form[data-remote]'), button = $('<button data-disable-with="submitting ..." name="submit2">Submit</button>');
+  form.append(button);
+
+  App.checkEnabledState(button, 'Submit');
+
+  form.bind('ajax:success', function(e, data) {
+    setTimeout(function() {
+      App.checkEnabledState(button, 'Submit');
+      start();
+    }, 13);
+  });
+  form.trigger('submit');
+
+  App.checkDisabledState(button, 'submitting ...');
+});
+
+asyncTest('form input[type=submit][data-disable-with] disables', 6, function(){
+  var form = $('form:not([data-remote])'), input = form.find('input[type=submit]');
+
+  App.checkEnabledState(input, 'Submit');
+
+  // WEEIRDD: attaching this handler makes the test work in IE7
+  $(document).bind('iframe:loading', function(e, form) {});
+
+  $(document).bind('iframe:loaded', function(e, data) {
+    setTimeout(function() {
+      App.checkDisabledState(input, 'submitting ...');
+      start();
+    }, 30);
+  });
+  form.trigger('submit');
+
+  setTimeout(function() {
+    App.checkDisabledState(input, 'submitting ...');
+  }, 30);
+});
+
+asyncTest('form[data-remote] input[type=submit][data-disable-with] is replaced in ajax callback', 2, function(){
+  var form = $('form:not([data-remote])').attr('data-remote', 'true'), origFormContents = form.html();
+
+  form.bind('ajax:success', function(){
+    form.html(origFormContents);
+
+    setTimeout(function(){
+      var input = form.find('input[type=submit]');
+      App.checkEnabledState(input, 'Submit');
+      start();
+    }, 30);
+  }).trigger('submit');
+});
+
+asyncTest('form[data-remote] input[data-disable-with] is replaced with disabled field in ajax callback', 2, function(){
+  var form = $('form:not([data-remote])').attr('data-remote', 'true'), input = form.find('input[type=submit]'),
+      newDisabledInput = input.clone().attr('disabled', 'disabled');
+
+  form.bind('ajax:success', function(){
+    input.replaceWith(newDisabledInput);
+
+    setTimeout(function(){
+      App.checkEnabledState(newDisabledInput, 'Submit');
+      start();
+    }, 30);
+  }).trigger('submit');
+});
+
+asyncTest('form input[type=submit][data-disable-with] using "form" attribute disables', 6, function() {
+  var form = $('#not_remote'), input = $('input[form=not_remote]');
+  App.checkEnabledState(input, 'Form Attr Submit');
+
+  // WEEIRDD: attaching this handler makes the test work in IE7
+  $(document).bind('iframe:loading', function(e, form) {});
+
+  $(document).bind('iframe:loaded', function(e, data) {
+    setTimeout(function() {
+      App.checkDisabledState(input, 'form attr submitting');
+      start();
+    }, 30);
+  });
+  form.trigger('submit');
+
+  setTimeout(function() {
+    App.checkDisabledState(input, 'form attr submitting');
+  }, 30);
+
+});
+
+asyncTest('form[data-remote] textarea[data-disable-with] attribute', 3, function() {
+  var form = $('form[data-remote]'),
+      textarea = $('<textarea data-disable-with="processing ..." name="user_bio">born, lived, died.</textarea>').appendTo(form);
+
+  form.bind('ajax:success', function(e, data) {
+    setTimeout(function() {
+      equal(data.params.user_bio, 'born, lived, died.');
+      start();
+    }, 13);
+  });
+  form.trigger('submit');
+
+  App.checkDisabledState(textarea, 'processing ...');
+});
+
+asyncTest('a[data-disable-with] disables', 4, function() {
+  var link = $('a[data-disable-with]');
+
+  App.checkEnabledState(link, 'Click me');
+
+  link.trigger('click');
+  App.checkDisabledState(link, 'clicking...');
+  start();
+});
+
+asyncTest('a[data-remote][data-disable-with] disables and re-enables', 6, function() {
+  var link = $('a[data-disable-with]').attr('data-remote', true);
+
+  App.checkEnabledState(link, 'Click me');
+
+  link
+    .bind('ajax:beforeSend', function() {
+      App.checkDisabledState(link, 'clicking...');
+    })
+    .bind('ajax:complete', function() {
+      setTimeout( function() {
+        App.checkEnabledState(link, 'Click me');
+        start();
+      }, 15);
+    })
+    .trigger('click');
+});
+
+asyncTest('a[data-remote][data-disable-with] re-enables when `ajax:before` event is cancelled', 6, function() {
+  var link = $('a[data-disable-with]').attr('data-remote', true);
+
+  App.checkEnabledState(link, 'Click me');
+
+  link
+    .bind('ajax:before', function() {
+      App.checkDisabledState(link, 'clicking...');
+      return false;
+    })
+    .trigger('click');
+
+  setTimeout(function() {
+    App.checkEnabledState(link, 'Click me');
+    start();
+  }, 30);
+});
+
+asyncTest('a[data-remote][data-disable-with] re-enables when `ajax:beforeSend` event is cancelled', 6, function() {
+  var link = $('a[data-disable-with]').attr('data-remote', true);
+
+  App.checkEnabledState(link, 'Click me');
+
+  link
+    .bind('ajax:beforeSend', function() {
+      App.checkDisabledState(link, 'clicking...');
+      return false;
+    })
+    .trigger('click');
+
+  setTimeout(function() {
+    App.checkEnabledState(link, 'Click me');
+    start();
+  }, 30);
+});
+
+asyncTest('a[data-remote][data-disable-with] re-enables when `ajax:error` event is triggered', 6, function() {
+  var link = $('a[data-disable-with]').attr('data-remote', true).attr('href', '/error');
+
+  App.checkEnabledState(link, 'Click me');
+
+  link
+    .bind('ajax:beforeSend', function() {
+      App.checkDisabledState(link, 'clicking...');
+    })
+    .trigger('click');
+
+  setTimeout(function() {
+    App.checkEnabledState(link, 'Click me');
+    start();
+  }, 30);
+});
+
+asyncTest('form[data-remote] input|button|textarea[data-disable-with] does not disable when `ajax:beforeSend` event is cancelled', 8, function() {
+  var form = $('form[data-remote]'),
+      input = form.find('input:text'),
+      button = $('<button data-disable-with="submitting ..." name="submit2">Submit</button>').appendTo(form),
+      textarea = $('<textarea data-disable-with="processing ..." name="user_bio">born, lived, died.</textarea>').appendTo(form),
+      submit = $('<input type="submit" data-disable-with="submitting ..." name="submit2" value="Submit" />').appendTo(form);
+
+  form
+    .bind('ajax:beforeSend', function() {
+      return false;
+    })
+    .trigger('submit');
+
+  App.checkEnabledState(input, 'john');
+  App.checkEnabledState(button, 'Submit');
+  App.checkEnabledState(textarea, 'born, lived, died.');
+  App.checkEnabledState(submit, 'Submit');
+
+  start();
+});
+
+asyncTest('ctrl-clicking on a link does not disables the link', 6, function() {
+  var link = $('a[data-disable-with]'), e;
+  e = $.Event('click');
+  e.metaKey = true;
+
+  App.checkEnabledState(link, 'Click me');
+
+  link.trigger(e);
+  App.checkEnabledState(link, 'Click me');
+
+  e = $.Event('click');
+  e.ctrlKey = true;
+
+  link.trigger(e);
+  App.checkEnabledState(link, 'Click me');
+  start();
+});