jQuery 1.2.3: AIR, Namespacing, and UI Alpha

Posted on by

We’re happy to announce a brand new release of jQuery. This is primarily a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.3:

If you wish to checkout the full release from the Subversion repository, you can do so by following the instructions and checking out the source from the following location:

svn co http://jqueryjs.googlecode.com/svn/tags/1.2.3

Important Changes

The primary purpose of this release was to fix a couple outstanding bugs from the jQuery 1.2.2 release. Specifically, this release is now compatible with Adobe AIR, will be included in Drupal 6, and will be the base for jQuery UI 1.5. Additionally, a couple minor features, for plugin developers, were included in this release.

.data() and .removeData()

These methods complement the, already included, jQuery.data and jQuery.removeData methods introduced in jQuery 1.2. The important change, however, is that they’ve been tailored for plugin developers. You can now namespace data additions – like you can with event binding/unbinding. For example:

  $("div").data("test", "original");
  $("div").data("test.plugin", "new data");
  alert( $("div").data("test") == "original" ); // true
  alert( $("div").data("test.plugin") == "new data" ); // true

Additionally, getting or setting data values can be overridden by a plugin. For example, the following code is from the, recently updated, draggables in jQuery UI:

  $(element).bind("setData.draggable", function(event, key, value){
     self.options[key] = value;
  }).bind("getData.draggable", function(event, key){
     return self.options[key];
  });

The above makes it such that all attempts to get and set draggable-namespaced data will be intercepted and handled by the plugin directly (rather than being bound directly to the element). The result is a powerful new interface for dealing with internalized data within a plugin.

.unbind(“.namespace”)

In jQuery 1.2 you could add and remove namespaced events, however you always had to include a name for the type of event being used. With this addition you can now remove all bound events that match a particular namespace, for example:

  $("div").bind("click.plugin", function(){});
  $("div").bind("mouseover.plugin", function(){});
  $("div").unbind(".plugin"); // All handlers removed

The above removes all bound event handlers that are within the “plugin” namespace.

.trigger(“click!”)

Finally, a new addition was included to allow exclusion of namespaced events from being triggered. For example:

  $("div").bind("click", function(){ alert("hello"); });
  $("div").bind("click.plugin", function(){ alert("goodbye"); });
  $("div").trigger("click!"); // alert("hello") only

The above only triggers the non-namespaced event handlers.

Alpha Release: jQuery UI 1.5 and jQuery Enchant 1.0

Last, but not least, we’re pleased to announce a new alpha release of jQuery UI. This is an overhaul of the existing code base with tons of a bug fixes and API tweaks. We need a ton of help testing this alpha, making sure that it’ll be rock-solid for the upcoming release candidate. Please participate in the discussion, helping us to get ready.

Additionally, we’re working on a new plugin called jQuery Enchant which will bring a ton of advanced effects to the library (like clip, shake, and explode – to name a few). This is an alpha release of this plugin, as well – so please help us test it and make sure that it’s completely up to the jQuery level of quality.

Download

Demos

Enjoy!

jQuery 1.2.3 Released

Posted on by

This is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.3:

.data() and .removeData()

These methods complement the already included jQuery.data and jQuery.removeData methods introduced in jQuery 1.2. The important change, however, is that they’ve been tailored for plugin developers. You can now namespace data additions – like you can with event binding/unbinding. For example:

  $("div").data("test", "original");
  $("div").data("test.plugin", "new data");
  alert( $("div").data("test") == "original" ); // true
  alert( $("div").data("test.plugin") == "new data" ); // true

Additionally, getting or setting data values can be overridden by a plugin. For example, the following code is from the, recently updated, draggables in jQuery UI:

  $(element).bind("setData.draggable", function(event, key, value){
     self.options[key] = value;
  }).bind("getData.draggable", function(event, key){
     return self.options[key];
  });

The above makes it such that all attempts to get and set draggable-namespaced data will be intercepted and handled by the plugin directly (rather than being bound directly to the element). The result is a powerful new interface for dealing with internalized data within a plugin.

.unbind(“.namespace”)

In jQuery 1.2 you could add and remove namespaced events, however you always had to include a name for the type of event being used. With this addition you can now remove all bound events that match a particular namespace, for example:

  $("div").bind("click.plugin", function(){});
  $("div").bind("mouseover.plugin", function(){});
  $("div").unbind(".plugin"); // All handlers removed

The above removes all bound event handlers that are within the “plugin” namespace.

Workin’ Hard

Posted on by


Paul Bakaus (jQuery UI Lead) and John Resig (jQuery Lead) working on
the next release of jQuery UI (1.5) and jQuery Core (1.2.3).

It’s a rare treat, in distributed Open Source development, to be able to work face-to-face with a fellow developer. Paul is located in Germany, I in Boston – and much of the jQuery team is scattered around the globe. He stopped into town for the weekend so that we could make sure that all the necessary code was in jQuery core for the upcoming jQuery UI 1.5 release candidate. We also had a chance to discuss the future of jQuery UI and plan out some of the best resource allocations for the upcoming months.

All that being said, this next release is going to be fantastic. It’s what jQuery UI 1.0 should have been. It’s been rough because of all the constraints on developer time that were in place when we first set out with this project, but it’s been getting better. Paul now works on jQuery UI full-time – and Liferay is putting a ton of resources towards making sure that the future of the library will be successful. It’s really exciting to see this project grow up and start to see some light.

jQuery 1.2.3 should be released within the next couple days (after some more testing) and jQuery UI 1.5rc1 will be announced on the jQuery UI mailing list at about that time.

Reposted from my blog.

jQuery UI and beyond: The jQuery-Liferay partnership

Posted on by

jQuery UI is growing, and I’m already seeing quite a few sites using it exclusively to support their interface. As a matter of fact, it’s growing so well, that a LA-based open-source company decided to hire a person to exclusively work on jQuery UI full-time.

I’m very happy to announce that I, Paul Bakaus, lead of jQuery UI, was hired by Liferay Inc., the company behind the world’s most popular open source java portal, to focus solely on bringing jQuery UI to a next level. This has an enormous effect to the whole project – I can now invest almost three times the amount of time and power, and I’m helping to deploy jQuery and jQuery UI in mission critical projects, which makes a huge difference.

Liferay’s plans are to standardize all their products to use jQuery and its plugins for the future (you’ll still be able to use other libraries at the same time) – it’s therefore in their very interest to see jQuery UI enjoying a long life, growing to meet expectations of all kinds of clients and beyond. To reach this goal, hiring me was the most logical decision: I now have no excuse not-to-focus on jQuery UI for a while – after all, it’s my day job!

But the cooperation with Liferay is even more than that: Liferay will be the first company starting from today to offer business critical support services for both jQuery and jQuery UI. Not only we’ll have a open source company backing us, but it’s the best publicity a project can have: jQuery UI will run in huge intranets, on every copy of Liferay. This will have a strong effect on both the distribution of the project and the level of quality that is being provided.

I myself am extremely excited about the change – there are countless positive side effects and products coming up – new products featuring jQuery, sponsored themes for UI, a new website, and of course – a new version of jQuery UI (the release date of the new, polished version with all the long-awaited bugfixes will be announced in the next couple of days).

jQuery 1.2.2: 2nd Birthday Present

Posted on by

On the 2nd anniversary of jQuery’s release we’re proud to bring you a brand new release of jQuery. This is primarily a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.2:

If you wish to checkout the full release from the Subversion repository, you can do so by following the following instructions and checking out the source from the following location:

svn co http://jqueryjs.googlecode.com/svn/tags/1.2.2

Important Changes

A lot of hard work was put into this release by Brandon Aaron and David Serduke. David is a new addition to the jQuery core development team and has been making significant contributions – please help us in welcoming him!

Primarily, this has been a bug fix and optimization release. We landed over 120 bug fixes and our test suite now has over 1157 tests in it – which we are quire proud of.

300% Speed Improvements to $(DOMElement)

Once again, we’ve taken a step at micro-improving the most-used features in jQuery. Specifically, the use of passing a DOM element into the jQuery function. (Most frequently used when you see stuff like $(this) in your code.)

Here’s a quick peak at some of the speed jumps that you can expect in all the major browsers:

Browser 1.2.1 (ms) 1.2.2 (ms)
Firefox 2 0.041 0.015
Firefox 3 0.033 0.01
Safari 3 0.017 0.005
Opera 9 0.023 0.004
Internet Explorer 6 0.04 0.03

.ready() Overhaul

The document ready function has been long due for some extra love. We’ve made a number of specific changes.

* Internet Explorer document ready drastically improved. We use a new technique inspired by Diego Perini. It allows us to not have to do a document.write() anymore, which is really fantastic.
* All browsers now wait for CSS to be ready, in addition to just the DOM. In reality, it’s not just a vanilla document ready anymore – but we found that users, overwhelmingly, needed to wait for document styling to be active (such as knowing if an element is visible, or what its height is). Specifically we’ve added improvements to Safari and Opera to make this possible.
* $(document).bind("ready", fn); – You can now watch for the document ready event via the traditional .bind() function. Of course, .ready() still works as you would expect it to.

.bind(“mouseenter”) / .bind(“mouseleave”)

The functionality that was the core of the .hover() function has been split out into two new cross-browser events: mouseenter and mouseleave. These are different from mouseover and mouseout as those events will fire as you move in and out of child elements (which is generally not desired). For example, the following are both valid and work perfectly in jQuery 1.2.2:

$("li").hover(function(){
  $(this).addClass("hover");
}, function(){
  $(this).removeClass("hover");
});
$("li").bind("mouseenter", function(){
  $(this).addClass("hover");
}).bind("mouseleave", function(){
  $(this).removeClass("hover");
});

.bind(“mousewheel”)

We have a new plugin, written by Brandon Aaron, based on the new Event API which adds mousewheel event support to jQuery core. This will allow you to write things like:

$("div").bind("mousewheel", function(event, delta){
  if ( delta < 0 )
    $(this).append("up");
  else
    $(this).append("down");
});

Complex :not()

Even though it's not part of the CSS 3 specification it's been a common feature request - so you can now do complex expressions in your :not() selectors. For example, the following now work:

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

Accept Headers

For normal jQuery Ajax operations we now send an extra Accept header to let the server know what kind of content we're looking for. If you specify a dataType argument then we'll take care of all the header setting for you. We currently send the following headers for each dataType.

  • xml "application/xml, text/xml"
  • html "text/html"
  • script "text/javascript, application/javascript"
  • json "application/json, text/javascript"
  • text "text/plain"
  • Everything else: "*/*"

Bug Fixes

Here's a sampling of some of the functionality that's seen some important overhauling.

* .clone() overhaul
* Script evaluation overhaul
* height() / width() overhaul
* Cross-frame DOM manipulation
* A few memory leaks have been resolved

Event API

There's a new API for dealing with events. You can now create your own custom event types (with custom ways of being set up and torn down). Effectively, it allows you to go beyond simple event triggering and create a full scheme for attaching, handling, and tearing down events on an element. A demonstration plugin was created by Brandon Aaron that you can use to learn the powerful new API.

jQuery 1.2.2 Released

Posted on by

This is a bug fix release for jQuery 1.2. You can view the full list of what was fixed on the bug tracker.

Downloading

jQuery 1.2.2:

Important Changes

A lot of hard work was put into this release by Brandon Aaron and David Serduke. David is a new addition to the jQuery core development team and has been making significant contributions – please help us in welcoming him!

Primarily, this has been a bug fix and optimization release. We landed over 120 bug fixes and our test suite now has over 1157 tests in it – which we are quite proud of.

300% Speed Improvements to $(DOMElement)

Once again, we’ve taken a step at micro-improving the most-used features in jQuery. Specifically, the use of passing a DOM element into the jQuery function. (Most frequently used when you see stuff like $(this) in your code.)

Here’s a quick peek at some of the speed jumps that you can expect in all the major browsers:

Browser 1.2.1 (ms) 1.2.2 (ms)
Firefox 2 0.041 0.015
Firefox 3 0.033 0.01
Safari 3 0.017 0.005
Opera 9 0.023 0.004
Internet Explorer 6 0.04 0.03

.ready() Overhaul

The document ready function has been long due for some extra love. We’ve made a number of specific changes.

  • Internet Explorer document ready drastically improved. We use a new technique inspired by Diego Perini. It allows us to not have to do a document.write() anymore, which is really fantastic.
  • All browsers now wait for CSS to be ready, in addition to just the DOM. In reality, it’s not just a vanilla document ready anymore – but we found that users, overwhelmingly, needed to wait for document styling to be active (such as knowing if an element is visible, or what its height is). Specifically we’ve added improvements to Safari and Opera to make this possible.
  • $(document).bind("ready", fn); – You can now watch for the document ready event via the traditional .bind() function. Of course, .ready() still works as you would expect it to.

.bind(“mouseenter”) / .bind(“mouseleave”)

The functionality that was the core of the .hover() function has been split out into two new cross-browser events: mouseenter and mouseleave. These are different from mouseover and mouseout as those events will fire as you move in and out of child elements (which is generally not desired). For example, the following are both valid and work perfectly in jQuery 1.2.2:

$("li").hover(function(){
  $(this).addClass("hover");
}, function(){
  $(this).removeClass("hover");
});
$("li").bind("mouseenter", function(){
  $(this).addClass("hover");
}).bind("mouseleave", function(){
  $(this).removeClass("hover");
});

.bind(“mousewheel”)

We have [http://dev.jquery.com/browser/trunk/plugins/mousewheel/jquery.mousewheel.js a new plugin], written by Brandon Aaron, based on the new Event API which adds mousewheel event support to jQuery core. This will allow you to write things like:

$("div").bind("mousewheel", function(event, delta){
  if ( delta < 0 )
    $(this).append("up");
  else
    $(this).append("down");
});

Complex :not()

Even though it's not part of the CSS 3 specification it's been a common feature request - so you can now do complex expressions in your :not() selectors. For example, the following now work:

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

Accept Headers

For normal jQuery Ajax operations we now send an extra Accept header to let the server know what kind of content we're looking for. If you specify a dataType argument then we'll take care of all the header setting for you. We currently send the following headers for each dataType.

  • xml "application/xml, text/xml"
  • html "text/html"
  • script "text/javascript, application/javascript"
  • json "application/json, text/javascript"
  • text "text/plain"
  • Everything else: "*/*"

Bug Fixes

Here's a sampling of some of the functionality that's seen some important overhauling.

  • .clone() overhaul
  • Script evaluation overhaul
  • height() / width() overhaul
  • Cross-frame DOM manipulation
  • A few memory leaks have been resolved

Event API

There's a new API for dealing with events. You can now create your own custom event types (with custom ways of being set up and torn down). Effectively, it allows you to go beyond simple event triggering and create a full scheme for attaching, handling, and tearing down events on an element. A [http://dev.jquery.com/browser/trunk/plugins/mousewheel/jquery.mousewheel.js demonstration plugin] was created by Brandon Aaron that you can use to learn the powerful new API.

Google Using jQuery

Posted on by

Google relaunched their Google Code site with a new design and, you guessed it, jQuery under the hood! Dion Almaer, employee at Google and co-founder of Ajaxian.com, discusses the redesign on his blog and makes mention to the fact that the Google team is now using jQuery for the Google Code site. DeWitt Clinton also discusses this on the Google Code Blog:

For example, the search results pages use a combination of the AJAX Search API and Custom Search Engines. The homepage gadgets use the AJAX Feed API and Google Reader feeds. The videos are powered by the YouTube API, the blogs by the Blogger API, the events powered by the Google Calendar API, the metrics by Google Analytics, the forums by Google Groups, etc., etc.. And we’re pleased to use jQuery, the wonderful open source JavaScript library (not ours, we’re just fans), to help power each page. Stay tuned — over the upcoming weeks we’ll offer detailed articles and tutorials about how we built the various parts of Google Code using open technologies.

As pioneers in the Ajax and JavaScript space, it’s extremely exciting to have Google use jQuery to help them build out this site and we look forward to helping the Google team in the future.

jQuery in Action (Get 30% Off!)

Posted on by

Hey guys,

As many of you already know, I have been working on jQuery in Action, a book on jQuery for Manning Publishers.

Almost the entire book is available on MEAP (Manning Early Access Program), and it's going to be published in December of this year.

The book itself is pretty awesome. It tries to give you the information you need with a useful narrative, including motivation for certain parts of jQuery. One of the greatest things about the book, in my humble opinion, are the labs, which allow you to test out parts of jQuery without having to throw together an entire test case. For instance, there's a selector lab, which lets you see, visually, which elements will be selected by a given jQuery selector, and a drag/drop lab, which lets you test drag options via radio buttons and then see the results in action quickly.

It's currently the only book out that covers jQuery 1.2, as well as the important parts of jQuery UI (including stuff like the undocumented callback object that you get in the draggable/droppable primitives). Toward the end of the book, you get full-chapter examples (my favorite is the Ajax chapter, which covers building an Ajaxified store selling boots ;) ), and focuses heavily on jQuery best practices and Unobtrusive Scripting.

The book itself is very much in the spirit of jQuery: short and to the point, while covering the important background material necessary to fully understand the topics at hand (especially non-trivial topics like event binding and Ajax).

Without further ado, you can purchase the book (you'll get the prerelease stuff now and the complete book when it's released in December) at Manning's Site. If you use the coupon code JQM30 before the end of October, you will also receive a 30% discount.