jQuery 1.6 in OpenVBX

With the release of OpenVBX 1.0 we also rolled out an upgrade to jQuery and jQuery UI. OpenVBX now ships with jQuery 1.6.2 and jQuery UI 1.8.14.

This is of note because jQuery 1.6 made some significant changes that may or may not affect your OpenVBX plugins or custom developed applications.

.prop() vs. attr()

The most notable change was in how DOM Properties are handled. From the jQuery Blog:

In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type="text" value="abc">. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop("value") is abcdef but the .attr("value") remains abc.

In a nutshell this means that when dealing with DOM Properties (also known as Boolean Attributes) the .prop() method should be used instead of .attr().

For example:

<script type="text/javascript">
	// OLD WAY
	$('.my-node').attr('checked', 'checked');
	$('.my-node').attr('checked', false);
	$('.my-node').removeAttr('checked');

	// NEW WAY
	$('.my-node').prop('checked', true);
	$('.my-node').prop('checked', false);
</script>

See these blog posts for the release notes on jQuery’s 1.6 releases:

Named Attributes in Selectors

Another notable change in newer versions of jQuery (not necessarily just in 1.6+) is how named attributes should be addressed in selectors. Older versions of jQuery would allow attribute values to be addressed without quotes but jQuery now requires these quotes to guarantee consistent behavior. For example:

<script type="text/javascript">
	// OLD WAY
	$('.my-input[name=input_name]').val();
	
	// NEW WAY
	$('.my-input[name="input_name"]').val();
</script>

Other Library Upgrades

The upgrade also meant that we needed to upgrade some other libraries as well:

So, be sure to test well with the new release before pushing to your clients. We'd all like to think that an upgrade will work right out of the box, but any time 3rd party libraries, custom development or plugins are involved there's always testing to be done 😉

Post a Comment

Your email is never shared. Required fields are marked *

*
*