diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..3af83847 --- /dev/null +++ b/.npmignore @@ -0,0 +1,4 @@ +script/ +test/ +Rakefile +Gemfile* diff --git a/.travis.yml b/.travis.yml index 21eb4736..7e6cb080 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,9 @@ language: ruby +sudo: false +cache: + - bundler + - directories: + - $HOME/.npm script: ./script/cibuild before_install: - "npm install jshint -g" @@ -15,8 +20,10 @@ env: - JQUERY_VERSION: 1.11.0 - JQUERY_VERSION: 1.11.1 - JQUERY_VERSION: 1.11.2 + - JQUERY_VERSION: 1.12.0 - JQUERY_VERSION: 2.0.0 - JQUERY_VERSION: 2.1.0 - JQUERY_VERSION: 2.1.1 - JQUERY_VERSION: 2.1.2 - JQUERY_VERSION: 2.1.3 + - JQUERY_VERSION: 2.2.0 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 64e6864d..6827438d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -27,12 +27,11 @@ git checkout -b my-feature-branch #### Bundle Install and Test -Ensure that you can build the project and run tests. Run rake test first, and then run the web tests. Visit [[http://localhost:4567]] in your browser. Click the version links at the top right of the page to run the test suite with the different supported versions of jQuery. +Ensure that you can build the project and run tests. Run `rake test:server` first, and then run the web tests by visiting [[http://localhost:4567]] in your browser. Click the version links at the top right of the page to run the test suite with the different supported versions of jQuery. ``` bundle install -rake test -ruby test/server.rb +rake test:server ``` #### Write Tests diff --git a/MIT-LICENSE b/MIT-LICENSE index ed4c3901..9c7e3c0b 100644 --- a/MIT-LICENSE +++ b/MIT-LICENSE @@ -1,4 +1,4 @@ -Copyright (c) 2007-2015 Contributors at http://github.com/rails/jquery-ujs/contributors +Copyright (c) 2007-2016 Contributors at http://github.com/rails/jquery-ujs/contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/README.md b/README.md index a9fd2ab4..2e429bd1 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,26 @@ Require both `jquery` and `jquery_ujs` into your application.js manifest. //= require jquery_ujs ``` +Installation using npm. +------------ + +Run `npm install --save jquery-ujs` to install the jquery-ujs package. + +Installation using Rails and Webpacker +------------ + +If you're using [webpacker](https://github.com/rails/webpacker) (introduced in [Rails 5.1](http://edgeguides.rubyonrails.org/5_1_release_notes.html#optional-webpack-support)) to manage JavaScript assets, then you can add the jquery-ujs npm package to your project using the [yarn](https://yarnpkg.com/en/) CLI. + +``` +$ yarn add jquery-ujs +``` + +Then, from any of your included files (e.g. `app/javascript/packs/application.js`, or from a JavaScript file imported by such a pack), you need only import the package for jquery-ujs to be initialized: + +```js +import {} from 'jquery-ujs' +``` + Installation using Bower ------------ diff --git a/RELEASE.md b/RELEASE.md new file mode 100644 index 00000000..59316f77 --- /dev/null +++ b/RELEASE.md @@ -0,0 +1,23 @@ +## Releasing jquery-ujs + +### Releasing to npm + +Make sure npm's configuration `sign-git-tag` is set to true. + +``` +npm config set sign-git-tag true +``` + +Release it to npm using the [npm version command](https://docs.npmjs.com/cli/version). Like: + +``` +npm version patch +``` + +This will: + +* Bump a patch version +* Commit the change +* Generate the tag +* Push the commit and the tag to the repository +* Publish the package in https://www.npmjs.com diff --git a/package.json b/package.json new file mode 100644 index 00000000..9299d5f5 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "jquery-ujs", + "version": "1.2.3", + "description": "Unobtrusive scripting adapter for jQuery", + "main": "src/rails.js", + "scripts": { + "test": "echo \"See the wiki: https://github.com/rails/jquery-ujs/wiki/Running-Tests-and-Contributing\" && exit 1", + "postversion": "git push && git push --tags && npm publish" + }, + "repository": { + "type": "git", + "url": "https://github.com/rails/jquery-ujs.git" + }, + "author": [ + "Stephen St. Martin", + "Steve Schwartz" + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/rails/jquery-ujs/issues" + }, + "homepage": "https://github.com/rails/jquery-ujs#readme", + "peerDependencies": { + "jquery": ">=1.8.0" + } +} diff --git a/src/rails.js b/src/rails.js index 59f35e86..0e27110d 100644 --- a/src/rails.js +++ b/src/rails.js @@ -1,4 +1,4 @@ -(function($, undefined) { +/* jshint node: true */ /** * Unobtrusive scripting adapter for jQuery @@ -10,10 +10,13 @@ * */ - // Cut down on the number of issues from people inadvertently including jquery_ujs twice - // by detecting and raising an error when it happens. +(function() { 'use strict'; + var jqueryUjsInit = function($, undefined) { + + // Cut down on the number of issues from people inadvertently including jquery_ujs twice + // by detecting and raising an error when it happens. if ( $.rails !== undefined ) { $.error('jquery-ujs has already been loaded!'); } @@ -24,19 +27,19 @@ $.rails = rails = { // Link elements bound by jquery-ujs - linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with], a[data-disable]', + linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote]:not([disabled]), a[data-disable-with], a[data-disable]', // Button elements bound by jquery-ujs - buttonClickSelector: 'button[data-remote]:not(form button), button[data-confirm]:not(form button)', + buttonClickSelector: 'button[data-remote]:not([form]):not(form button), button[data-confirm]:not([form]):not(form button)', // Select elements bound by jquery-ujs inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]', // Form elements bound by jquery-ujs - formSubmitSelector: 'form', + formSubmitSelector: 'form:not([data-turbo=true])', // Form input elements bound by jquery-ujs - formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type]), input[type=submit][form], input[type=image][form], button[type=submit][form], button[form]:not([type])', + formInputClickSelector: 'form:not([data-turbo=true]) input[type=submit], form:not([data-turbo=true]) input[type=image], form:not([data-turbo=true]) button[type=submit], form:not([data-turbo=true]) button:not([type]), input[type=submit][form], input[type=image][form], button[type=submit][form], button[form]:not([type])', // Form input elements disabled during form submission disableSelector: 'input[data-disable-with]:enabled, button[data-disable-with]:enabled, textarea[data-disable-with]:enabled, input[data-disable]:enabled, button[data-disable]:enabled, textarea[data-disable]:enabled', @@ -48,7 +51,7 @@ requiredInputSelector: 'input[name][required]:not([disabled]), textarea[name][required]:not([disabled])', // Form file input elements - fileInputSelector: 'input[type=file]:not([disabled])', + fileInputSelector: 'input[name][type=file]:not([disabled])', // Link onClick disable selector with possible reenable after remote submission linkDisableSelector: 'a[data-disable-with], a[data-disable]', @@ -113,15 +116,17 @@ dataType = element.data('type') || ($.ajaxSettings && $.ajaxSettings.dataType); if (element.is('form')) { - method = element.attr('method'); - url = element.attr('action'); - data = element.serializeArray(); + method = element.data('ujs:submit-button-formmethod') || element.attr('method'); + url = element.data('ujs:submit-button-formaction') || element.attr('action'); + data = $(element[0]).serializeArray(); // memoized value from clicked submit button var button = element.data('ujs:submit-button'); if (button) { data.push(button); element.data('ujs:submit-button', null); } + element.data('ujs:submit-button-formmethod', null); + element.data('ujs:submit-button-formaction', null); } else if (element.is(rails.inputChangeSelector)) { method = element.data('method'); url = element.data('url'); @@ -307,24 +312,45 @@ // Helper function which checks for blank inputs in a form that match the specified CSS selector blankInputs: function(form, specifiedSelector, nonBlank) { - var inputs = $(), input, valueToCheck, - selector = specifiedSelector || 'input,textarea', - allInputs = form.find(selector); - - allInputs.each(function() { + var foundInputs = $(), + input, + valueToCheck, + radiosForNameWithNoneSelected, + radioName, + selector = specifiedSelector || 'input,textarea', + requiredInputs = form.find(selector), + checkedRadioButtonNames = {}; + + requiredInputs.each(function() { input = $(this); - valueToCheck = input.is('input[type=checkbox],input[type=radio]') ? input.is(':checked') : !!input.val(); - if (valueToCheck === nonBlank) { + if (input.is('input[type=radio]')) { - // Don't count unchecked required radio if other radio with same name is checked - if (input.is('input[type=radio]') && allInputs.filter('input[type=radio]:checked[name="' + input.attr('name') + '"]').length) { - return true; // Skip to next input - } + // Don't count unchecked required radio as blank if other radio with same name is checked, + // regardless of whether same-name radio input has required attribute or not. The spec + // states https://www.w3.org/TR/html5/forms.html#the-required-attribute + radioName = input.attr('name'); - inputs = inputs.add(input); + // Skip if we've already seen the radio with this name. + if (!checkedRadioButtonNames[radioName]) { + + // If none checked + if (form.find('input[type=radio]:checked[name="' + radioName + '"]').length === 0) { + radiosForNameWithNoneSelected = form.find( + 'input[type=radio][name="' + radioName + '"]'); + foundInputs = foundInputs.add(radiosForNameWithNoneSelected); + } + + // We only need to check each name once. + checkedRadioButtonNames[radioName] = radioName; + } + } else { + valueToCheck = input.is('input[type=checkbox],input[type=radio]') ? input.is(':checked') : !!input.val(); + if (valueToCheck === nonBlank) { + foundInputs = foundInputs.add(input); + } } }); - return inputs.length ? inputs : false; + return foundInputs.length ? foundInputs : false; }, // Helper function which checks for non-blank inputs in a form that match the specified CSS selector @@ -349,7 +375,7 @@ element.html(replacement); } - element.bind('click.railsDisable', function(e) { // prevent further clicking + element.on('click.railsDisable', function(e) { // prevent further clicking return rails.stopEverything(e); }); element.data('ujs:disabled', true); @@ -361,7 +387,7 @@ element.html(element.data('ujs:enable-with')); // set to old enabled state element.removeData('ujs:enable-with'); // clean up cache } - element.unbind('click.railsDisable'); // enable element + element.off('click.railsDisable'); // enable element element.removeData('ujs:disabled'); } }; @@ -393,15 +419,15 @@ }); }); - $document.delegate(rails.linkDisableSelector, 'ajax:complete', function() { + $document.on('ajax:complete', rails.linkDisableSelector, function() { rails.enableElement($(this)); }); - $document.delegate(rails.buttonDisableSelector, 'ajax:complete', function() { + $document.on('ajax:complete', rails.buttonDisableSelector, function() { rails.enableFormElement($(this)); }); - $document.delegate(rails.linkClickSelector, 'click.rails', function(e) { + $document.on('click.rails', rails.linkClickSelector, 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); @@ -425,7 +451,7 @@ } }); - $document.delegate(rails.buttonClickSelector, 'click.rails', function(e) { + $document.on('click.rails', rails.buttonClickSelector, function(e) { var button = $(this); if (!rails.allowAction(button) || !rails.isRemote(button)) return rails.stopEverything(e); @@ -442,7 +468,7 @@ return false; }); - $document.delegate(rails.inputChangeSelector, 'change.rails', function(e) { + $document.on('change.rails', rails.inputChangeSelector, function(e) { var link = $(this); if (!rails.allowAction(link) || !rails.isRemote(link)) return rails.stopEverything(e); @@ -450,7 +476,7 @@ return false; }); - $document.delegate(rails.formSubmitSelector, 'submit.rails', function(e) { + $document.on('submit.rails', rails.formSubmitSelector, function(e) { var form = $(this), remote = rails.isRemote(form), blankRequiredInputs, @@ -495,7 +521,7 @@ } }); - $document.delegate(rails.formInputClickSelector, 'click.rails', function(event) { + $document.on('click.rails', rails.formInputClickSelector, function(event) { var button = $(this); if (!rails.allowAction(button)) return rails.stopEverything(event); @@ -505,17 +531,22 @@ data = name ? {name:name, value:button.val()} : null; var form = button.closest('form'); + if (form.length === 0) { + form = $('#' + button.attr('form')); + } form.data('ujs:submit-button', data); - // Save formnovalidate attribute from button + // Save attributes from button form.data('ujs:formnovalidate-button', button.attr('formnovalidate')); + form.data('ujs:submit-button-formaction', button.attr('formaction')); + form.data('ujs:submit-button-formmethod', button.attr('formmethod')); }); - $document.delegate(rails.formSubmitSelector, 'ajax:send.rails', function(event) { + $document.on('ajax:send.rails', rails.formSubmitSelector, function(event) { if (this === event.target) rails.disableFormElements($(this)); }); - $document.delegate(rails.formSubmitSelector, 'ajax:complete.rails', function(event) { + $document.on('ajax:complete.rails', rails.formSubmitSelector, function(event) { if (this === event.target) rails.enableFormElements($(this)); }); @@ -524,4 +555,11 @@ }); } -})( jQuery ); + }; + + if (window.jQuery) { + jqueryUjsInit(jQuery); + } else if (typeof exports === 'object' && typeof module === 'object') { + module.exports = jqueryUjsInit; + } +})(); diff --git a/test/public/test/call-remote-callbacks.js b/test/public/test/call-remote-callbacks.js index beee0a0c..7dd1d6ac 100644 --- a/test/public/test/call-remote-callbacks.js +++ b/test/public/test/call-remote-callbacks.js @@ -7,18 +7,18 @@ module('call-remote-callbacks', { })); }, teardown: function() { - $(document).undelegate('form[data-remote]', 'ajax:beforeSend'); - $(document).undelegate('form[data-remote]', 'ajax:before'); - $(document).undelegate('form[data-remote]', 'ajax:send'); - $(document).undelegate('form[data-remote]', 'ajax:complete'); - $(document).undelegate('form[data-remote]', 'ajax:success'); - $(document).unbind('ajaxStop'); - $(document).unbind('iframe:loading'); + $(document).off('ajax:beforeSend', 'form[data-remote]'); + $(document).off('ajax:before', 'form[data-remote]'); + $(document).off('ajax:send', 'form[data-remote]'); + $(document).off('ajax:complete', 'form[data-remote]'); + $(document).off('ajax:success', 'form[data-remote]'); + $(document).off('ajaxStop'); + $(document).off('iframe:loading'); } }); function start_after_submit(form) { - form.bind('ajax:complete', function() { + form.on('ajax:complete', function() { ok(true, 'ajax:complete'); start(); }); @@ -43,7 +43,7 @@ asyncTest('modifying form fields with "ajax:before" sends modified data in reque $('form[data-remote]') .append($('')) .append($('')) - .bind('ajax:before', function() { + .on('ajax:before', function() { var form = $(this); form .append($('',{name: 'other_user_name',value: 'jonathan'})) @@ -53,7 +53,7 @@ asyncTest('modifying form fields with "ajax:before" sends modified data in reque }); submit(function(form) { - form.bind('ajax:success', function(e, data, status, xhr) { + form.on('ajax:success', function(e, data, status, xhr) { equal(data.params.user_name, 'steve', 'modified field value should have been submitted'); equal(data.params.other_user_name, 'jonathan', 'added field value should have been submitted'); equal(data.params.removed_user_name, undefined, 'removed field value should be undefined'); @@ -63,13 +63,13 @@ asyncTest('modifying form fields with "ajax:before" sends modified data in reque asyncTest('modifying data("type") with "ajax:before" requests new dataType in request', 2, function(){ $('form[data-remote]').data('type','html') - .bind('ajax:before', function() { + .on('ajax:before', function() { var form = $(this); form.data('type','xml'); }); submit(function(form) { - form.bind('ajax:beforeSend', function(e, xhr, settings) { + form.on('ajax:beforeSend', function(e, xhr, settings) { equal(settings.dataType, 'xml', 'modified dataType should have been requested'); }); }); @@ -77,13 +77,13 @@ asyncTest('modifying data("type") with "ajax:before" requests new dataType in re asyncTest('setting data("with-credentials",true) with "ajax:before" uses new setting in request', 2, function(){ $('form[data-remote]').data('with-credentials',false) - .bind('ajax:before', function() { + .on('ajax:before', function() { var form = $(this); form.data('with-credentials',true); }); submit(function(form) { - form.bind('ajax:beforeSend', function(e, xhr, settings) { + form.on('ajax:beforeSend', function(e, xhr, settings) { equal(settings.xhrFields && settings.xhrFields.withCredentials, true, 'setting modified in ajax:before should have forced withCredentials request'); }); }); @@ -91,37 +91,37 @@ asyncTest('setting data("with-credentials",true) with "ajax:before" uses new set asyncTest('stopping the "ajax:beforeSend" event aborts the request', 1, function() { submit(function(form) { - form.bind('ajax:beforeSend', function() { + form.on('ajax:beforeSend', function() { ok(true, 'aborting request in ajax:beforeSend'); return false; }); - form.unbind('ajax:send').bind('ajax:send', function() { + form.off('ajax:send').on('ajax:send', function() { ok(false, 'ajax:send should not run'); }); - form.unbind('ajax:complete').bind('ajax:complete', function() { + form.off('ajax:complete').on('ajax:complete', function() { ok(false, 'ajax:complete should not run'); }); - form.bind('ajax:error', function(e, xhr, status, error) { + form.on('ajax:error', function(e, xhr, status, error) { ok(false, 'ajax:error should not run'); }); - $(document).bind('ajaxStop', function() { + $(document).on('ajaxStop', function() { start(); }); }); }); asyncTest('blank required form input field should abort request and trigger "ajax:aborted:required" event', 5, function() { - $(document).bind('iframe:loading', function() { + $(document).on('iframe:loading', function() { ok(false, 'form should not get submitted'); }); var form = $('form[data-remote]') .append($('')) .append($('')) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(false, 'ajax:beforeSend should not run'); }) - .bind('ajax:aborted:required', function(e,data){ + .on('ajax:aborted:required', function(e,data){ ok(data.length == 2, 'ajax:aborted:required event is passed all blank required inputs (jQuery objects)'); ok(data.first().is('input[name="user_name"]') , 'ajax:aborted:required adds blank required input to data'); ok(data.last().is('textarea[name="user_bio"]'), 'ajax:aborted:required adds blank required textarea to data'); @@ -131,7 +131,7 @@ asyncTest('blank required form input field should abort request and trigger "aja setTimeout(function() { form.find('input[required],textarea[required]').val('Tyler'); - form.unbind('ajax:beforeSend'); + form.off('ajax:beforeSend'); submit(); }, 13); }); @@ -140,7 +140,7 @@ asyncTest('blank required form input for non-remote form should abort normal sub var form = $('form[data-remote]') .append($('')) .removeAttr('data-remote') - .bind('ujs:everythingStopped', function() { + .on('ujs:everythingStopped', function() { ok(true, 'ujs:everythingStopped should run'); }) .trigger('submit'); @@ -153,10 +153,10 @@ asyncTest('blank required form input for non-remote form should abort normal sub asyncTest('form should be submitted with blank required fields if handler is bound to "ajax:aborted:required" event that returns false', 1, function(){ var form = $('form[data-remote]') .append($('')) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(true, 'ajax:beforeSend should run'); }) - .bind('ajax:aborted:required', function() { + .on('ajax:aborted:required', function() { return false; }) .trigger('submit'); @@ -170,10 +170,10 @@ asyncTest('disabled fields should not be included in blank required check', 2, f var form = $('form[data-remote]') .append($('')) .append($('')) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(true, 'ajax:beforeSend should run'); }) - .bind('ajax:aborted:required', function() { + .on('ajax:aborted:required', function() { ok(false, 'ajax:aborted:required should not run'); }); @@ -184,10 +184,10 @@ asyncTest('form should be submitted with blank required fields if it has the "no var form = $('form[data-remote]') .append($('')) .attr("novalidate", "novalidate") - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(true, 'ajax:beforeSend should run'); }) - .bind('ajax:aborted:required', function() { + .on('ajax:aborted:required', function() { ok(false, 'ajax:aborted:required should not run'); }); @@ -199,10 +199,10 @@ asyncTest('form should be submitted with blank required fields if the button has var form = $('form[data-remote]') .append($('')) .append(submit_button) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(true, 'ajax:beforeSend should run'); }) - .bind('ajax:aborted:required', function() { + .on('ajax:aborted:required', function() { ok(false, 'ajax:aborted:required should not run'); }); @@ -210,7 +210,7 @@ asyncTest('form should be submitted with blank required fields if the button has }); asyncTest('blank required form input for non-remote form with "novalidate" attribute should not abort normal submission', 1, function() { - $(document).bind('iframe:loading', function() { + $(document).on('iframe:loading', function() { ok(true, 'form should get submitted'); }); @@ -229,7 +229,7 @@ asyncTest('unchecked required checkbox should abort form submission', 1, functio var form = $('form[data-remote]') .append($('')) .removeAttr('data-remote') - .bind('ujs:everythingStopped', function() { + .on('ujs:everythingStopped', function() { ok(true, 'ujs:everythingStopped should run'); }) .trigger('submit'); @@ -241,10 +241,10 @@ asyncTest('unchecked required checkbox should abort form submission', 1, functio asyncTest('unchecked required radio should abort form submission', 1, function() { var form = $('form[data-remote]') - .append($('')) - .append($('')) + .append($('')) + .append($('')) .removeAttr('data-remote') - .bind('ujs:everythingStopped', function() { + .on('ujs:everythingStopped', function() { ok(true, 'ujs:everythingStopped should run'); }) .trigger('submit'); @@ -255,7 +255,7 @@ asyncTest('unchecked required radio should abort form submission', 1, function() }); asyncTest('required radio should only require one to be checked', 1, function() { - $(document).bind('iframe:loading', function() { + $(document).on('iframe:loading', function() { ok(true, 'form should get submitted'); }); @@ -263,7 +263,32 @@ asyncTest('required radio should only require one to be checked', 1, function() .append($('')) .append($('')) .removeAttr('data-remote') - .bind('ujs:everythingStopped', function() { + .on('ujs:everythingStopped', function() { + ok(false, 'ujs:everythingStopped should not run'); + }) + .find('#checkme').prop('checked', true) + .end() + .trigger('submit'); + + setTimeout(function() { + start(); + }, 13); +}); + +asyncTest('required radio should only require one to be checked if not all radios are required', 1, function() { + $(document).on('iframe:loading', function() { + ok(true, 'form should get submitted'); + }); + + var form = $('form[data-remote]') + // Check the radio that is not required + .append($('')) + // Check the radio that is not required + .append($('')) + // Only one needs to be required + .append($('')) + .removeAttr('data-remote') + .on('ujs:everythingStopped', function() { ok(false, 'ujs:everythingStopped should not run'); }) .find('#checkme').prop('checked', true) @@ -282,13 +307,13 @@ function skipIt() { asyncTest('non-blank file form input field should abort remote request, but submit normally', 5, function() { var form = $('form[data-remote]') .append($('')) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(false, 'ajax:beforeSend should not run'); }) - .bind('iframe:loading', function() { + .on('iframe:loading', function() { ok(true, 'form should get submitted'); }) - .bind('ajax:aborted:file', function(e,data) { + .on('ajax:aborted:file', function(e,data) { ok(data.length == 1, 'ajax:aborted:file event is passed all non-blank file inputs (jQuery objects)'); ok(data.first().is('input[name="attachment"]') , 'ajax:aborted:file adds non-blank file input to data'); ok(true, 'ajax:aborted:file event should run'); @@ -297,7 +322,28 @@ function skipIt() { setTimeout(function() { form.find('input[type="file"]').val(''); - form.unbind('ajax:beforeSend'); + form.off('ajax:beforeSend'); + submit(); + }, 13); + }); + + asyncTest('file form input field should not abort remote request if file form input does not have a name attribute', 5, function() { + var form = $('form[data-remote]') + .append($('')) + .on('ajax:beforeSend', function() { + ok(true, 'ajax:beforeSend should run'); + }) + .on('iframe:loading', function() { + ok(true, 'form should get submitted'); + }) + .on('ajax:aborted:file', function(e,data) { + ok(false, 'ajax:aborted:file should not run'); + }) + .trigger('submit'); + + setTimeout(function() { + form.find('input[type="file"]').val(''); + form.off('ajax:beforeSend'); submit(); }, 13); }); @@ -305,39 +351,39 @@ function skipIt() { asyncTest('blank file input field should abort request entirely if handler bound to "ajax:aborted:file" event that returns false', 1, function() { var form = $('form[data-remote]') .append($('')) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(false, 'ajax:beforeSend should not run'); }) - .bind('iframe:loading', function() { + .on('iframe:loading', function() { ok(false, 'form should not get submitted'); }) - .bind('ajax:aborted:file', function() { + .on('ajax:aborted:file', function() { return false; }) .trigger('submit'); setTimeout(function() { form.find('input[type="file"]').val(''); - form.unbind('ajax:beforeSend'); + form.off('ajax:beforeSend'); submit(); }, 13); }); } asyncTest('"ajax:beforeSend" can be observed and stopped with event delegation', 1, function() { - $(document).delegate('form[data-remote]', 'ajax:beforeSend', function() { + $(document).on('ajax:beforeSend', 'form[data-remote]', function() { ok(true, 'ajax:beforeSend observed with event delegation'); return false; }); submit(function(form) { - form.unbind('ajax:send').bind('ajax:send', function() { + form.off('ajax:send').on('ajax:send', function() { ok(false, 'ajax:send should not run'); }); - form.unbind('ajax:complete').bind('ajax:complete', function() { + form.off('ajax:complete').on('ajax:complete', function() { ok(false, 'ajax:complete should not run'); }); - $(document).bind('ajaxStop', function() { + $(document).on('ajaxStop', function() { start(); }); }); @@ -345,19 +391,19 @@ asyncTest('"ajax:beforeSend" can be observed and stopped with event delegation', asyncTest('"ajax:beforeSend", "ajax:send", "ajax:success" and "ajax:complete" are triggered', 9, function() { submit(function(form) { - form.bind('ajax:beforeSend', function(e, xhr, settings) { + form.on('ajax:beforeSend', function(e, xhr, settings) { ok(xhr.setRequestHeader, 'first argument to "ajax:beforeSend" should be an XHR object'); equal(settings.url, '/echo', 'second argument to "ajax:beforeSend" should be a settings object'); }); - form.bind('ajax:send', function(e, xhr) { + form.on('ajax:send', function(e, xhr) { ok(xhr.abort, 'first argument to "ajax:send" should be an XHR object'); }); - form.bind('ajax:success', function(e, data, status, xhr) { + form.on('ajax:success', function(e, data, status, xhr) { ok(data.REQUEST_METHOD, 'first argument to ajax:success should be a data object'); equal(status, 'success', 'second argument to ajax:success should be a status string'); ok(xhr.getResponseHeader, 'third argument to "ajax:success" should be an XHR object'); }); - form.bind('ajax:complete', function(e, xhr, status) { + form.on('ajax:complete', function(e, xhr, status) { ok(xhr.getResponseHeader, 'first argument to "ajax:complete" should be an XHR object'); equal(status, 'success', 'second argument to ajax:complete should be a status string'); }); @@ -368,9 +414,9 @@ if(window.phantom !== undefined) { asyncTest('"ajax:beforeSend", "ajax:send", "ajax:error" and "ajax:complete" are triggered on error', 7, function() { submit(function(form) { form.attr('action', '/error'); - form.bind('ajax:beforeSend', function(arg) { ok(true, 'ajax:beforeSend') }); - form.bind('ajax:send', function(arg) { ok(true, 'ajax:send') }); - form.bind('ajax:error', function(e, xhr, status, error) { + form.on('ajax:beforeSend', function(arg) { ok(true, 'ajax:beforeSend') }); + form.on('ajax:send', function(arg) { ok(true, 'ajax:send') }); + form.on('ajax:error', function(e, xhr, status, error) { ok(xhr.getResponseHeader, 'first argument to "ajax:error" should be an XHR object'); equal(status, 'error', 'second argument to ajax:error should be a status string'); // Firefox 8 returns "Forbidden " with trailing space @@ -383,18 +429,18 @@ if(window.phantom !== undefined) { } // IF THIS TEST IS FAILING, TRY INCREASING THE TIMEOUT AT THE BOTTOM TO > 100 -asyncTest('binding to ajax callbacks via .delegate() triggers handlers properly', 4, function() { +asyncTest('binding to ajax callbacks via .on() triggers handlers properly', 4, function() { $(document) - .delegate('form[data-remote]', 'ajax:beforeSend', function() { + .on('ajax:beforeSend', 'form[data-remote]', function() { ok(true, 'ajax:beforeSend handler is triggered'); }) - .delegate('form[data-remote]', 'ajax:send', function() { + .on('ajax:send', 'form[data-remote]', function() { ok(true, 'ajax:send handler is triggered'); }) - .delegate('form[data-remote]', 'ajax:complete', function() { + .on('ajax:complete', 'form[data-remote]', function() { ok(true, 'ajax:complete handler is triggered'); }) - .delegate('form[data-remote]', 'ajax:success', function() { + .on('ajax:success', 'form[data-remote]', function() { ok(true, 'ajax:success handler is triggered'); }); $('form[data-remote]').trigger('submit'); diff --git a/test/public/test/call-remote.js b/test/public/test/call-remote.js index ef084037..0d9214a0 100644 --- a/test/public/test/call-remote.js +++ b/test/public/test/call-remote.js @@ -11,8 +11,8 @@ module('call-remote'); function submit(fn) { $('form') - .bind('ajax:success', fn) - .bind('ajax:complete', function() { start() }) + .on('ajax:success', fn) + .on('ajax:complete', function() { start() }) .trigger('submit'); } @@ -32,6 +32,19 @@ asyncTest('form method is not read from "data-method" attribute in case of missi }); }); +asyncTest('form method is read from submit button "formmethod" if submit is triggered by that button', 1, function() { + var submitButton = $('') + buildForm({ method: 'post' }); + + $('#qunit-fixture').find('form').append(submitButton) + .on('ajax:success', function(e, data, status, xhr) { + App.assertGetRequest(data); + }) + .on('ajax:complete', function() { start() }); + + submitButton.trigger('click'); +}); + asyncTest('form default method is GET', 1, function() { buildForm(); @@ -56,6 +69,19 @@ asyncTest('form url is read from "action" not "href"', 1, function() { }); }); +asyncTest('form url is read from submit button "formaction" if submit is triggered by that button', 1, function() { + var submitButton = $('') + buildForm({ method: 'post', href: '/echo2' }); + + $('#qunit-fixture').find('form').append(submitButton) + .on('ajax:success', function(e, data, status, xhr) { + App.assertRequestPath(data, '/echo'); + }) + .on('ajax:complete', function() { start() }); + + submitButton.trigger('click'); +}); + asyncTest('prefer JS, but accept any format', 1, function() { buildForm({ method: 'post' }); @@ -87,7 +113,7 @@ asyncTest('allow empty form "action"', 1, function() { buildForm({ action: '' }); $('#qunit-fixture').find('form') - .bind('ajax:beforeSend', function(e, xhr, settings) { + .on('ajax:beforeSend', function(e, xhr, settings) { // Get current location (the same way jQuery does) try { currentLocation = location.href; @@ -129,7 +155,7 @@ asyncTest('intelligently guesses crossDomain behavior when target URL has a diff $('#qunit-fixture').append(''); $('#qunit-fixture').find('form') - .bind('ajax:beforeSend', function(e, xhr, settings) { + .on('ajax:beforeSend', function(e, xhr, settings) { equal(settings.crossDomain, true, 'crossDomain should be set to true'); @@ -148,7 +174,7 @@ asyncTest('intelligently guesses crossDomain behavior when target URL consists o $('#qunit-fixture').append(''); $('#qunit-fixture').find('form') - .bind('ajax:beforeSend', function(e, xhr, settings) { + .on('ajax:beforeSend', function(e, xhr, settings) { equal(settings.crossDomain, false, 'crossDomain should be set to false'); diff --git a/test/public/test/data-confirm.js b/test/public/test/data-confirm.js index 8add713c..2e905d42 100644 --- a/test/public/test/data-confirm.js +++ b/test/public/test/data-confirm.js @@ -39,11 +39,11 @@ asyncTest('clicking on a link with data-confirm attribute. Confirm yes.', 6, fun window.confirm = function(msg) { message = msg; return true }; $('a[data-confirm]') - .bind('confirm:complete', function(e, data) { + .on('confirm:complete', function(e, data) { App.assertCallbackInvoked('confirm:complete'); ok(data == true, 'confirm:complete passes in confirm answer (true)'); }) - .bind('ajax:success', function(e, data, status, xhr) { + .on('ajax:success', function(e, data, status, xhr) { App.assertCallbackInvoked('ajax:success'); App.assertRequestPath(data, '/echo'); App.assertGetRequest(data); @@ -60,11 +60,11 @@ asyncTest('clicking on a button with data-confirm attribute. Confirm yes.', 6, f window.confirm = function(msg) { message = msg; return true }; $('button[data-confirm]') - .bind('confirm:complete', function(e, data) { + .on('confirm:complete', function(e, data) { App.assertCallbackInvoked('confirm:complete'); ok(data == true, 'confirm:complete passes in confirm answer (true)'); }) - .bind('ajax:success', function(e, data, status, xhr) { + .on('ajax:success', function(e, data, status, xhr) { App.assertCallbackInvoked('ajax:success'); App.assertRequestPath(data, '/echo'); App.assertGetRequest(data); @@ -81,11 +81,11 @@ asyncTest('clicking on a link with data-confirm attribute. Confirm No.', 3, func window.confirm = function(msg) { message = msg; return false }; $('a[data-confirm]') - .bind('confirm:complete', function(e, data) { + .on('confirm:complete', function(e, data) { App.assertCallbackInvoked('confirm:complete'); ok(data == false, 'confirm:complete passes in confirm answer (false)'); }) - .bind('ajax:beforeSend', function(e, data, status, xhr) { + .on('ajax:beforeSend', function(e, data, status, xhr) { App.assertCallbackNotInvoked('ajax:beforeSend'); }) .trigger('click'); @@ -102,11 +102,11 @@ asyncTest('clicking on a button with data-confirm attribute. Confirm No.', 3, fu window.confirm = function(msg) { message = msg; return false }; $('button[data-confirm]') - .bind('confirm:complete', function(e, data) { + .on('confirm:complete', function(e, data) { App.assertCallbackInvoked('confirm:complete'); ok(data == false, 'confirm:complete passes in confirm answer (false)'); }) - .bind('ajax:beforeSend', function(e, data, status, xhr) { + .on('ajax:beforeSend', function(e, data, status, xhr) { App.assertCallbackNotInvoked('ajax:beforeSend'); }) .trigger('click'); @@ -123,11 +123,11 @@ asyncTest('clicking on a button with data-confirm attribute. Confirm error.', 3, window.confirm = function(msg) { message = msg; throw "some random error"; }; $('button[data-confirm]') - .bind('confirm:complete', function(e, data) { + .on('confirm:complete', function(e, data) { App.assertCallbackInvoked('confirm:complete'); ok(data == false, 'confirm:complete passes in confirm answer (false)'); }) - .bind('ajax:beforeSend', function(e, data, status, xhr) { + .on('ajax:beforeSend', function(e, data, status, xhr) { App.assertCallbackNotInvoked('ajax:beforeSend'); }) .trigger('click'); @@ -144,11 +144,11 @@ asyncTest('clicking on a submit button with form and data-confirm attributes. Co window.confirm = function(msg) { message = msg; return false }; $('input[type=submit][form]') - .bind('confirm:complete', function(e, data) { + .on('confirm:complete', function(e, data) { App.assertCallbackInvoked('confirm:complete'); ok(data == false, 'confirm:complete passes in confirm answer (false)'); }) - .bind('ajax:beforeSend', function(e, data, status, xhr) { + .on('ajax:beforeSend', function(e, data, status, xhr) { App.assertCallbackNotInvoked('ajax:beforeSend'); }) .trigger('click'); @@ -166,11 +166,11 @@ asyncTest('binding to confirm event of a link and returning false', 1, function( }; $('a[data-confirm]') - .bind('confirm', function() { + .on('confirm', function() { App.assertCallbackInvoked('confirm'); return false; }) - .bind('confirm:complete', function() { + .on('confirm:complete', function() { App.assertCallbackNotInvoked('confirm:complete'); }) .trigger('click'); @@ -187,11 +187,11 @@ asyncTest('binding to confirm event of a button and returning false', 1, functio }; $('button[data-confirm]') - .bind('confirm', function() { + .on('confirm', function() { App.assertCallbackInvoked('confirm'); return false; }) - .bind('confirm:complete', function() { + .on('confirm:complete', function() { App.assertCallbackNotInvoked('confirm:complete'); }) .trigger('click'); @@ -209,11 +209,11 @@ asyncTest('binding to confirm:complete event of a link and returning false', 2, }; $('a[data-confirm]') - .bind('confirm:complete', function() { + .on('confirm:complete', function() { App.assertCallbackInvoked('confirm:complete'); return false; }) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.assertCallbackNotInvoked('ajax:beforeSend'); }) .trigger('click'); @@ -231,11 +231,11 @@ asyncTest('binding to confirm:complete event of a button and returning false', 2 }; $('button[data-confirm]') - .bind('confirm:complete', function() { + .on('confirm:complete', function() { App.assertCallbackInvoked('confirm:complete'); return false; }) - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.assertCallbackNotInvoked('ajax:beforeSend'); }) .trigger('click'); diff --git a/test/public/test/data-disable-with.js b/test/public/test/data-disable-with.js index 0366f81e..1bb67426 100644 --- a/test/public/test/data-disable-with.js +++ b/test/public/test/data-disable-with.js @@ -40,7 +40,7 @@ module('data-disable-with', { })); }, teardown: function() { - $(document).unbind('iframe:loaded'); + $(document).off('iframe:loaded'); } }); @@ -49,7 +49,7 @@ asyncTest('form input field with "data-disable-with" attribute', 7, function() { App.checkEnabledState(input, 'john'); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { App.checkEnabledState(input, 'john'); equal(data.params.user_name, 'john'); @@ -67,7 +67,7 @@ asyncTest('blank form input field with "data-disable-with" attribute', 7, functi input.val(''); App.checkEnabledState(input, ''); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { App.checkEnabledState(input, ''); equal(data.params.user_name, ''); @@ -85,7 +85,7 @@ asyncTest('form button with "data-disable-with" attribute', 6, function() { App.checkEnabledState(button, 'Submit'); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { App.checkEnabledState(button, 'Submit'); start(); @@ -102,9 +102,9 @@ asyncTest('form input[type=submit][data-disable-with] disables', 6, function(){ App.checkEnabledState(input, 'Submit'); // WEEIRDD: attaching this handler makes the test work in IE7 - $(document).bind('iframe:loading', function(e, form) {}); + $(document).on('iframe:loading', function(e, form) {}); - $(document).bind('iframe:loaded', function(e, data) { + $(document).on('iframe:loaded', function(e, data) { setTimeout(function() { App.checkDisabledState(input, 'submitting ...'); start(); @@ -138,7 +138,7 @@ test('form input[type=submit][data-disable-with] re-enables when `pageshow` even 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.on('ajax:success', function(){ form.html(origFormContents); setTimeout(function(){ @@ -153,7 +153,7 @@ asyncTest('form[data-remote] input[data-disable-with] is replaced with disabled 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(){ + form.on('ajax:success', function(){ input.replaceWith(newDisabledInput); setTimeout(function(){ @@ -168,9 +168,9 @@ asyncTest('form input[type=submit][data-disable-with] using "form" attribute dis App.checkEnabledState(input, 'Form Attr Submit'); // WEEIRDD: attaching this handler makes the test work in IE7 - $(document).bind('iframe:loading', function(e, form) {}); + $(document).on('iframe:loading', function(e, form) {}); - $(document).bind('iframe:loaded', function(e, data) { + $(document).on('iframe:loaded', function(e, data) { setTimeout(function() { App.checkDisabledState(input, 'form attr submitting'); start(); @@ -188,7 +188,7 @@ asyncTest('form[data-remote] textarea[data-disable-with] attribute', 3, function var form = $('form[data-remote]'), textarea = $('').appendTo(form); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { equal(data.params.user_bio, 'born, lived, died.'); start(); @@ -227,10 +227,10 @@ asyncTest('a[data-remote][data-disable-with] disables and re-enables', 6, functi App.checkEnabledState(link, 'Click me'); link - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.checkDisabledState(link, 'clicking...'); }) - .bind('ajax:complete', function() { + .on('ajax:complete', function() { setTimeout( function() { App.checkEnabledState(link, 'Click me'); start(); @@ -245,7 +245,7 @@ asyncTest('a[data-remote][data-disable-with] re-enables when `ajax:before` event App.checkEnabledState(link, 'Click me'); link - .bind('ajax:before', function() { + .on('ajax:before', function() { App.checkDisabledState(link, 'clicking...'); return false; }) @@ -263,7 +263,7 @@ asyncTest('a[data-remote][data-disable-with] re-enables when `ajax:beforeSend` e App.checkEnabledState(link, 'Click me'); link - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.checkDisabledState(link, 'clicking...'); return false; }) @@ -281,7 +281,7 @@ asyncTest('a[data-remote][data-disable-with] re-enables when `ajax:error` event App.checkEnabledState(link, 'Click me'); link - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.checkDisabledState(link, 'clicking...'); }) .trigger('click'); @@ -300,7 +300,7 @@ asyncTest('form[data-remote] input|button|textarea[data-disable-with] does not d submit = $('').appendTo(form); form - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { return false; }) .trigger('submit'); @@ -337,10 +337,10 @@ asyncTest('button[data-remote][data-disable-with] disables and re-enables', 6, f App.checkEnabledState(button, 'Click me'); button - .bind('ajax:send', function() { + .on('ajax:send', function() { App.checkDisabledState(button, 'clicking...'); }) - .bind('ajax:complete', function() { + .on('ajax:complete', function() { setTimeout( function() { App.checkEnabledState(button, 'Click me'); start(); @@ -355,7 +355,7 @@ asyncTest('button[data-remote][data-disable-with] re-enables when `ajax:before` App.checkEnabledState(button, 'Click me'); button - .bind('ajax:before', function() { + .on('ajax:before', function() { App.checkDisabledState(button, 'clicking...'); return false; }) @@ -373,7 +373,7 @@ asyncTest('button[data-remote][data-disable-with] re-enables when `ajax:beforeSe App.checkEnabledState(button, 'Click me'); button - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.checkDisabledState(button, 'clicking...'); return false; }) @@ -391,7 +391,7 @@ asyncTest('button[data-remote][data-disable-with] re-enables when `ajax:error` e App.checkEnabledState(button, 'Click me'); button - .bind('ajax:send', function() { + .on('ajax:send', function() { App.checkDisabledState(button, 'clicking...'); }) .trigger('click'); diff --git a/test/public/test/data-disable.js b/test/public/test/data-disable.js index 3df1bb9c..ed30b0ec 100644 --- a/test/public/test/data-disable.js +++ b/test/public/test/data-disable.js @@ -30,7 +30,7 @@ module('data-disable', { })); }, teardown: function() { - $(document).unbind('iframe:loaded'); + $(document).off('iframe:loaded'); } }); @@ -39,7 +39,7 @@ asyncTest('form input field with "data-disable" attribute', 7, function() { App.checkEnabledState(input, 'john'); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { App.checkEnabledState(input, 'john'); equal(data.params.user_name, 'john'); @@ -57,7 +57,7 @@ asyncTest('form button with "data-disable" attribute', 7, function() { App.checkEnabledState(button, 'Submit'); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { App.checkEnabledState(button, 'Submit'); start(); @@ -75,9 +75,9 @@ asyncTest('form input[type=submit][data-disable] disables', 6, function(){ App.checkEnabledState(input, 'Submit'); // WEEIRDD: attaching this handler makes the test work in IE7 - $(document).bind('iframe:loading', function(e, form) {}); + $(document).on('iframe:loading', function(e, form) {}); - $(document).bind('iframe:loaded', function(e, data) { + $(document).on('iframe:loaded', function(e, data) { setTimeout(function() { App.checkDisabledState(input, 'Submit'); start(); @@ -93,7 +93,7 @@ asyncTest('form input[type=submit][data-disable] disables', 6, function(){ asyncTest('form[data-remote] input[type=submit][data-disable] 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.on('ajax:success', function(){ form.html(origFormContents); setTimeout(function(){ @@ -108,7 +108,7 @@ asyncTest('form[data-remote] input[data-disable] is replaced with disabled field 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(){ + form.on('ajax:success', function(){ input.replaceWith(newDisabledInput); setTimeout(function(){ @@ -122,7 +122,7 @@ asyncTest('form[data-remote] textarea[data-disable] attribute', 3, function() { var form = $('form[data-remote]'), textarea = $('').appendTo(form); - form.bind('ajax:success', function(e, data) { + form.on('ajax:success', function(e, data) { setTimeout(function() { equal(data.params.user_bio, 'born, lived, died.'); start(); @@ -150,10 +150,10 @@ asyncTest('a[data-remote][data-disable] disables and re-enables', 6, function() App.checkEnabledState(link, 'Click me'); link - .bind('ajax:send', function() { + .on('ajax:send', function() { App.checkDisabledState(link, 'Click me'); }) - .bind('ajax:complete', function() { + .on('ajax:complete', function() { setTimeout( function() { App.checkEnabledState(link, 'Click me'); start(); @@ -168,7 +168,7 @@ asyncTest('a[data-remote][data-disable] re-enables when `ajax:before` event is c App.checkEnabledState(link, 'Click me'); link - .bind('ajax:before', function() { + .on('ajax:before', function() { App.checkDisabledState(link, 'Click me'); return false; }) @@ -186,7 +186,7 @@ asyncTest('a[data-remote][data-disable] re-enables when `ajax:beforeSend` event App.checkEnabledState(link, 'Click me'); link - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.checkDisabledState(link, 'Click me'); return false; }) @@ -204,7 +204,7 @@ asyncTest('a[data-remote][data-disable] re-enables when `ajax:error` event is tr App.checkEnabledState(link, 'Click me'); link - .bind('ajax:send', function() { + .on('ajax:send', function() { App.checkDisabledState(link, 'Click me'); }) .trigger('click'); @@ -223,7 +223,7 @@ asyncTest('form[data-remote] input|button|textarea[data-disable] does not disabl submit = $('').appendTo(form); form - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { return false; }) .trigger('submit'); @@ -260,10 +260,10 @@ asyncTest('button[data-remote][data-disable] disables and re-enables', 6, functi App.checkEnabledState(button, 'Click me'); button - .bind('ajax:send', function() { + .on('ajax:send', function() { App.checkDisabledState(button, 'Click me'); }) - .bind('ajax:complete', function() { + .on('ajax:complete', function() { setTimeout( function() { App.checkEnabledState(button, 'Click me'); start(); @@ -278,7 +278,7 @@ asyncTest('button[data-remote][data-disable] re-enables when `ajax:before` event App.checkEnabledState(button, 'Click me'); button - .bind('ajax:before', function() { + .on('ajax:before', function() { App.checkDisabledState(button, 'Click me'); return false; }) @@ -296,7 +296,7 @@ asyncTest('button[data-remote][data-disable] re-enables when `ajax:beforeSend` e App.checkEnabledState(button, 'Click me'); button - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { App.checkDisabledState(button, 'Click me'); return false; }) @@ -314,7 +314,7 @@ asyncTest('button[data-remote][data-disable] re-enables when `ajax:error` event App.checkEnabledState(button, 'Click me'); button - .bind('ajax:send', function() { + .on('ajax:send', function() { App.checkDisabledState(button, 'Click me'); }) .trigger('click'); diff --git a/test/public/test/data-method.js b/test/public/test/data-method.js index 57528377..32b90d70 100644 --- a/test/public/test/data-method.js +++ b/test/public/test/data-method.js @@ -7,12 +7,12 @@ module('data-method', { })); }, teardown: function() { - $(document).unbind('iframe:loaded'); + $(document).off('iframe:loaded'); } }); function submit(fn, options) { - $(document).bind('iframe:loaded', function(e, data) { + $(document).on('iframe:loaded', function(e, data) { fn(data); start(); }); diff --git a/test/public/test/data-remote.js b/test/public/test/data-remote.js index c0b47586..215d8217 100644 --- a/test/public/test/data-remote.js +++ b/test/public/test/data-remote.js @@ -16,7 +16,14 @@ module('data-remote', { .append($('
', { action: '/echo', 'data-remote': 'true', - method: 'post' + method: 'post', + id: 'my-remote-form' + })) + .append($('', { + href: '/echo', + 'data-remote': 'true', + disabled: 'disabled', + text: 'Disabed link' })) .find('form').append($('')); @@ -32,7 +39,7 @@ asyncTest('ctrl-clicking on a link does not fire ajaxyness', 0, function() { // follow links using `trigger('click')`, it only fires bindings. link .removeAttr('data-params') - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(false, 'ajax should not be triggered'); }); @@ -55,7 +62,7 @@ asyncTest('ctrl-clicking on a link still fires ajax for non-GET links and for li link .removeAttr('data-params') .attr('data-method', 'POST') - .bind('ajax:beforeSend', function() { + .on('ajax:beforeSend', function() { ok(true, 'ajax should be triggered'); }) .trigger(e); @@ -73,27 +80,40 @@ asyncTest('ctrl-clicking on a link still fires ajax for non-GET links and for li asyncTest('clicking on a link with data-remote attribute', 5, function() { $('a[data-remote]') - .bind('ajax:success', function(e, data, status, xhr) { + .on('ajax:success', function(e, data, status, xhr) { App.assertCallbackInvoked('ajax:success'); App.assertRequestPath(data, '/echo'); equal(data.params.data1, 'value1', 'ajax arguments should have key data1 with right value'); equal(data.params.data2, 'value2', 'ajax arguments should have key data2 with right value'); App.assertGetRequest(data); }) - .bind('ajax:complete', function() { start() }) + .on('ajax:complete', function() { start() }) .trigger('click'); }); +asyncTest('clicking on a link with disabled attribute', 0, function() { + $('a[disabled]') + .on("ajax:before", function(e, data, status, xhr) { + App.assertCallbackNotInvoked('ajax:success') + }) + .on('ajax:complete', function() { start() }) + .trigger('click') + + setTimeout(function() { + start(); + }, 13); +}); + asyncTest('clicking on a button with data-remote attribute', 5, function() { $('button[data-remote]') - .bind('ajax:success', function(e, data, status, xhr) { + .on('ajax:success', function(e, data, status, xhr) { App.assertCallbackInvoked('ajax:success'); App.assertRequestPath(data, '/echo'); equal(data.params.data1, 'value1', 'ajax arguments should have key data1 with right value'); equal(data.params.data2, 'value2', 'ajax arguments should have key data2 with right value'); App.assertGetRequest(data); }) - .bind('ajax:complete', function() { start() }) + .on('ajax:complete', function() { start() }) .trigger('click'); }); @@ -111,30 +131,90 @@ asyncTest('changing a select option with data-remote attribute', 5, function() { ); $('select[data-remote]') - .bind('ajax:success', function(e, data, status, xhr) { + .on('ajax:success', function(e, data, status, xhr) { App.assertCallbackInvoked('ajax:success'); App.assertRequestPath(data, '/echo'); equal(data.params.user_data, 'optionValue2', 'ajax arguments should have key term with right value'); equal(data.params.data1, 'value1', 'ajax arguments should have key data1 with right value'); App.assertGetRequest(data); }) - .bind('ajax:complete', function() { start() }) + .on('ajax:complete', function() { start() }) .val('optionValue2') .trigger('change'); }); asyncTest('submitting form with data-remote attribute', 4, function() { $('form[data-remote]') - .bind('ajax:success', function(e, data, status, xhr) { + .on('ajax:success', function(e, data, status, xhr) { App.assertCallbackInvoked('ajax:success'); App.assertRequestPath(data, '/echo'); equal(data.params.user_name, 'john', 'ajax arguments should have key user_name with right value'); App.assertPostRequest(data); }) - .bind('ajax:complete', function() { start() }) + .on('ajax:complete', function() { start() }) .trigger('submit'); }); +asyncTest('submitting form with data-remote attribute should include inputs in a fieldset only once', 3, function() { + $('form[data-remote]') + .append('
') + .on('ajax:success', function(e, data, status, xhr) { + App.assertCallbackInvoked('ajax:success'); + equal(data.params.items.length, 1, 'ajax arguments should only have the item once') + App.assertPostRequest(data); + }) + .on('ajax:complete', function() { + $('form[data-remote], fieldset').remove() + start() + }) + .trigger('submit'); +}); + +asyncTest('submitting form with data-remote attribute submits input with matching [form] attribute', 5, function() { + $('#qunit-fixture') + .append($('')); + + $('form[data-remote]') + .on('ajax:success', function(e, data, status, xhr) { + App.assertCallbackInvoked('ajax:success'); + App.assertRequestPath(data, '/echo'); + equal(data.params.user_name, 'john', 'ajax arguments should have key user_name with right value'); + equal(data.params.user_data, 'value1', 'ajax arguments should have key user_data with right value'); + App.assertPostRequest(data); + }) + .on('ajax:complete', function() { start() }) + .trigger('submit'); +}); + +asyncTest('submitting form with data-remote attribute by clicking button with matching [form] attribute', 5, function() { + $('form[data-remote]') + .on('ajax:success', function(e, data, status, xhr) { + App.assertCallbackInvoked('ajax:success'); + App.assertRequestPath(data, '/echo'); + equal(data.params.user_name, 'john', 'ajax arguments should have key user_name with right value'); + equal(data.params.user_data, 'value2', 'ajax arguments should have key user_data with right value'); + App.assertPostRequest(data); + }) + .on('ajax:complete', function() { start() }); + + $('