Don't fire ajaxyness if "data-remote"="false", because jQuery("#my_id").data("remote") === false if input's data-remote is set to string "false" (<input id="my_id" data-remote="false" />)

Author: simsalabim

src/rails.js

@@ -97,6 +97,13 @@
       return element.attr('href');
     },
 
+    // Checks whether "data-remote" is falsy or not to prevent remote submission if "data-remote"="false"
+    // because jQuery(selector).data("remote") === "false" if data attribute is string "false",
+    // e.g. <input id="id" data-remote="false" />
+    isRemote: function(element) {
+      return element.data('remote') !== undefined && element.data('remote') !== false;
+    },
+
     // Submits "remote" forms and links with ajax
     handleRemote: function(element) {
       var method, url, data, elCrossDomain, crossDomain, withCredentials, dataType, options;
@@ -367,7 +374,7 @@
 
       if (!metaClick && link.is(rails.linkDisableSelector)) rails.disableElement(link);
 
-      if (link.data('remote') !== undefined) {
+      if (rails.isRemote(link)) {
         if (metaClick && (!method || method === 'GET') && !data) { return true; }
 
         var handleRemote = rails.handleRemote(link);
@@ -387,6 +394,8 @@
 
     $document.delegate(rails.buttonClickSelector, 'click.rails', function(e) {
       var button = $(this);
+      
+      if (! rails.isRemote(button)) return false;
 
       if (!rails.allowAction(button)) return rails.stopEverything(e);
 
@@ -404,6 +413,7 @@
 
     $document.delegate(rails.inputChangeSelector, 'change.rails', function(e) {
       var link = $(this);
+      if (! rails.isRemote(link)) return false;
       if (!rails.allowAction(link)) return rails.stopEverything(e);
 
       rails.handleRemote(link);
@@ -412,7 +422,7 @@
 
     $document.delegate(rails.formSubmitSelector, 'submit.rails', function(e) {
       var form = $(this),
-        remote = form.data('remote') !== undefined,
+        remote = rails.isRemote(form),
         blankRequiredInputs,
         nonBlankFileInputs;
 

test/public/test/data-remote.js

@@ -186,3 +186,96 @@ asyncTest('returning false in form\'s submit bindings in non-submit-bubbling bro
 
     setTimeout(function(){ start(); }, 13);
 });
+
+asyncTest('clicking on a link with falsy "data-remote" attribute does not fire ajaxyness ', 0, function() {
+  $('a[data-remote]')
+    .attr('data-remote', 'false')
+    .bind('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered');
+    })
+    .bind('click', function() {
+      return false;
+    })
+    .trigger('click');
+
+  setTimeout(function(){ start(); }, 20);
+});
+
+asyncTest('ctrl-clicking on a link with falsy "data-remote" attribute does not fire ajaxyness  even if "data-params" present', 0, function() {
+  var link = $('a[data-remote]'), e;
+  e = $.Event('click');
+  e.metaKey = true;
+
+  link
+    .removeAttr('data-params')
+    .attr('data-remote', 'false')
+    .attr('data-method', 'POST')
+    .bind('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered');
+    })
+    .bind('click', function() {
+      return false;
+    })
+    .trigger(e);
+
+  e = $.Event('click');
+  e.metaKey = true;
+
+  link
+    .removeAttr('data-method')
+    .attr('data-params', 'name=steve')
+    .trigger(e);
+
+  setTimeout(function(){ start(); }, 20);
+});
+
+asyncTest('clicking on a button with falsy "data-remote" attribute', 0, function() {
+  $('button[data-remote]:first')
+    .attr('data-remote', 'false')
+    .bind('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered');
+    })
+    .bind('click', function() {
+      return false;
+    })
+    .trigger('click');
+
+  setTimeout(function(){ start(); }, 20);
+});
+
+asyncTest('submitting a form with falsy "data-remote" attribute', 0, function() {
+  $('form[data-remote]:first')
+    .attr('data-remote', 'false')
+    .bind('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered');
+    })
+    .bind('submit', function() {
+      return false;
+    })
+    .trigger('submit');
+
+  setTimeout(function(){ start(); }, 20);
+});
+
+asyncTest('changing a select option with falsy "data-remote" attribute', 0, function() {
+  $('form')
+    .append(
+      $('<select />', {
+        'name': 'user_data',
+        'data-remote': 'false',
+        'data-params': 'data1=value1',
+        'data-url': '/echo'
+      })
+      .append($('<option />', {value: 'optionValue1', text: 'option1'}))
+      .append($('<option />', {value: 'optionValue2', text: 'option2'}))
+    );
+
+  $('select[data-remote=false]:first')
+    .bind('ajax:beforeSend', function() {
+      ok(false, 'ajax should not be triggered');
+    })
+    .val('optionValue2')
+    .trigger('change');
+
+  setTimeout(function(){ start(); }, 20);
+});