Sunday, October 2, 2011

jQuery 1.6.1 has .attr() backward compatibility


jQuery is a JavaScript library whose purpose is to simply the client-side scripting of HTML.It simplifies document traversing, event handling, animating, and Ajax interactions that contribute to rapid web development. The recent release of jQuery Version 1.6.1 has come up with .attr() backward compatibility. However the Previous release of jQuery 1.6 was controversial with respect to the handling of the attributes and DOM object properties. There were indifferent reactions towards the changes in the .attr() method in jQuery 1.6. The Boolean logic flaws resulting from the change were hard to debug. The change could have stopped people from updating the version to jQuery 1.6 because it could have resulted in breaks in the script .Consider an example:

               
In version prior to jQuery 1.6, $(“#chk1).attr(“checked”) would return boolean value true. However, in version 1.6, there was a change in the way the attr() method responds. And the same code would return an empty string in jQuery 1.6. The reason being the change in approach due to introduction of .prop().This change caused a confusion and had to be rolled back in jQuery 1.6.1.
Consider the following code:

if ($("#chk1").attr("checked")) {
// If block runs for previous versions of jQuery
}else {
// Else block runs in jQuery 1.6
}

Thus in jQuery 1.6.1 .attr() method reverts to its original functionality and the above code will evaluate to true.

Comparing .attr() in 1.6 and other releases

jQuery 1.6
alert($("#chk1").attr("checked")) // ""
alert($("#chk1").prop("checked")) // true

jQuery 1.6.1 and prior to 1.6
alert($("#chk1").attr("checked")) // true
alert($("#chk1").prop("checked")) // true (For 1.6.1 only)

What’s new in this Version?

The old .attr() method had many bugs and was hard to maintain. jQuery 1.6.1 comes with several bug fixes as well as an update to the Attributes module.

Specifically, boolean attributes such as checked, selected, readonly, and disabled in 1.6.1 will be treated just as they used to be treated in jQuery versions prior to 1.6. This means that code such as


$(“:checkbox”).attr(“checked”,
true);
$(“option”).attr(“selected”,
true);
$(“input”).attr(“readonly”,
true);
$(“input”).attr(“disabled”,
true);

or even:


if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

will not need to be changed in 1.6.1 in order to work as previously expected.

The jQuery 1.6.1 release notes provide an attribute/property lookup and the recommended method usage:

Attribute/Property     .attr()               .prop()

accesskey                                     

align                                

async                                                     

autofocus                                               

checked                                                 

class                             

contenteditable                          

defaultValue                                               

draggable                      

href                                                                             

id                                                                                 

label                                                                            

location                                                    

multiple                                                   

nodeName                                                  

nodeType                                                    

readOnly                                               

rel                                                                

selected                                                  

selectedIndex                                              

src                                                               

style                                                              

tabindex                        

tagName                                                      

title                                                                

type                                                                

width                              

The checks indicate that .attr() can be used to set the attribute value but the preferred method would be to use .prop().

It is available for download/use at jQuery CDN:


  

No comments: