Many sites now use various means to update their version of jQuery to a later version than 1.4, the version in Drupal 7.

jQuery deprecated (version 1.6) and removed (version 1.9) the use of .attr() for use to set "checked" and "disabled" properties. It also points out that attempting to retrieve values by using .attr() will result in confusion/problems, as in this example: $elem.attr("checked"); will return true if $elem has a "checked" property at all, not if it is true.

jQuery now uses .prop() instead to set and retrieve the value of a "checked" or "disabled" properties of a node.

.removeAttr() may also cause problems/unexpected behavior, as it completely removes the property rather than setting it to false, consequently it will no longer be selectable by selectors that typically would work. 
Example: 
Using <code>jQuery('input[name="test"]').removeAttr('checked');

on <input name="test" type="checkbox" checked="true" /> will result in <input name="test" type="checkbox" />. This is typically not the intended result, as it will cause CSS and jQuery selectors that you would expect to be able to find that item to fail.
Example: jQuery('input[checked]') will now fail to return this node.

See: jQuery 1.9 Upgrade Guide: attr vs. prop

It looks like the jQuery Update module's newest dev branch (7.x-3.x-dev) is including an option via a patch for using jQuery Migrate, which fixes compatibility with legacy jQuery code in newer version of jQuery. However, since most users will not move to that branch until it is out of dev, either a dependency on certain versions of jQuery and possibly certain settings in jQuery update need to be addressed, or the code in question should be made to work with all versions of jQuery.

Possible problems:

file: ctools/js/dependent.js

  1. Line 100: var val = $(trigger).attr('checked') ? true : false;
  2. Line 169: object.attr('disabled', false);
  3. Line 171: object.children().attr('disabled', false);
  4. Line 177: object.attr('disabled', true);
  5. Line 178: object.children().attr('disabled', true);

file: ctools/js/stylizer.js

  1. Line 216: $widget.attr('checked', !$widget.attr('checked') || $widget.is('input[type=radio]'));
  2. Line 216: $widget.attr('checked', !$widget.attr('checked') || $widget.is('input[type=radio]'));
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

DrCord’s picture

mrjmd’s picture

Status: Active » Needs work
FileSize
3.27 KB

I'm curious how other modules are handling this.

Here's an attempt at a patch that checks jquery version and responds accordingly. Not sure how helpful it will be but it's a start. This patch also assumes 1.x, I see there is already an issue in the jquery update queue bout allowing 2.0 here: #1974482: Offer latest jQuery 2.x as an option (currently 2.1.0) - Fall back to 1.x for IE6/7/8..

DrCord’s picture

There seem to be a few ways of going about this:

  1. Detect the version of jQuery in use and use code that works with that, this seems like it would add a lot of code doing the same thing, but for different versions of jQuery - YUCK!
  2. Force a full dependency on the jQuery update module and and a >X version of jQuery and update all code to use the newer version
  3. If using the jQuery update module, require the 3.x branch, as it includes jQuery migrate - not sure if feasible or possible to have a module somewhat dependent...
  4. Include the jQuery migrate plugin if the detected version of jQuery is not the expected one from original core and the migrate plugin isn't already included
  5. I reported a similar bug on the imagecache_actions module queue and a user submitted a great looking patch that switched the code to the form #states API, allowing drupal to handle it natively, which should work great...whatever version of jQuery you have gets used then...imagecache_actions solution/patch

My first inclination is that #4 or #5 sound the most feasible.

There could be additional options or combinations of these that are better, I am just trying to help the discussion get started and once we have a viable solution, potentially help roll patches.

jacktonkin’s picture

FileSize
2.38 KB

Another alternative is to use the DOM checked & disabled properties directly.

The attached patch does just this. Where it's obvious that there should only be one matched element I've explicitly set the first, rather than iterating over the set with .each(). For getters .attr() returned the value from the first matched element anyway.

jacktonkin’s picture

Status: Needs work » Needs review
FileSize
2.38 KB

The previous patch wrongly imagined jQuery's .not() returned a boolean. It doesn't, of course. Please review the attached patch.

mglaman’s picture

Status: Needs review » Needs work
+++ ctools.patched/js/dependent.js	2015-05-08 15:54:34.669005156 +0100
@@ -97,7 +97,9 @@
+                // Check the DOM property because jQuery 1.6 changes the
+                // attr() method (see http://api.jquery.com/attr/).
+                var val = $(trigger)[0].checked;

Couldn't this be simplified to just

$(trigger).is(':checked');

+++ ctools.patched/js/dependent.js	2015-05-08 15:54:34.669005156 +0100
@@ -166,16 +168,20 @@
+                  object[0].disabled = false;
...
+                  object[0].disabled = true;

+++ ctools.patched/js/stylizer.js	2015-05-08 16:08:35.071663005 +0100
@@ -213,7 +213,7 @@
+          $widget[0].checked = !$widget.is(':checked') || $widget.is('input[type=radio]');

Accessing items within the jQuery object directly doesn't feel like the appropriate approach either. There should be a method which will be supported across the different versions.

Anonymous’s picture

The patch is working great for me.

Does it accomplish its task in the 'best' way possible? Maybe not.

I'd like to see it get as soon as possible, as it fixes a bug many people are experiencing.

If it needs a little refactoring, can that happen on a re-visit?

sylus’s picture

The patch no longer applies as of ctools 1.10 and I think might be superceded?

#2353853: Checkbox triggered dependent form items broken for jQuery 1.7+

rudiedirkx’s picture

Fixed in #2353853: Checkbox triggered dependent form items broken for jQuery 1.7+:

// **This check determines if using a jQuery version 1.7 or newer which requires the use of the prop function instead of the attr function when not called on an attribute
if ($().prop) {
  var val = $(trigger).prop('checked') ? true : false;
}
else {
  var val = $(trigger).attr('checked') ? true : false;
}

Was in 1.10.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.