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.

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.

jQuery UI: Interactions and Widgets

Posted on by
Meet the jQuery UI team at jQueryCamp Boston!
We’re having a free one day conference this October and most of the jQuery, and jQuery UI, teams will be there. Come along, ask questions, and meet the people who build the library that you love!

User Interface - Green

Today we’re very pleased to announce a brand new library: jQuery UI. jQuery UI is a fully themed interaction and widget library built on top of jQuery.

You’ll be able to find everything that you need to know about jQuery UI on it’s site:
http://ui.jquery.com/

jQuery UI signals the start of a whole new branch of the jQuery project which will focus on developing high-quality, reusable, components that you’ll be able to drop in your applications. Frequently, these components are coming directly to you from traditional jQuery plugins, but with strict coding, documentation, themeing, and demo standards. We hope you’ll enjoy this new level of quality as much as we do.

We’re launching with one complete theme: Flora (designed by Tom) and two partially-complete themes: Light and Dark (by Sean). Within the next week we’re going to be announcing the details of a new theming competition, along with everything that you need to completely build your own jQuery UI theme.

Note: jQuery UI requires that you use, at least, jQuery 1.2.1 or newer.

Please be kind, there’s still going to be a mess of rough edges, as is to be expected with a brand new project. Please submit bugs to the bug tracker under the “UI” component and bring them up for discussion on the jQuery UI Mailing List. We appreciate your help.

Without further ado, here’s jQuery UI!

Demo App: Advanced Image Gallery

(Currently has issues in IE and Safari – we’re working on some fixes which should be up later today.)

Demo App: Bar Chart Navigation

(Currently only works in browsers that have Canvas support: Firefox, Safari, and Opera.)

Features: Mouse Interaction

Draggables (Docs)

Droppables (Docs)

Sortables (Docs)

Selectables (Docs)

Resizables (Docs)

Features: Widgets

Accordion (Docs)

Calendar (Docs)

Dialog (Docs)

Slider (Docs)

Tablesorter (Docs)

Tabs (Docs)

Features: Effects

Magnifier (Docs)

Shadow (Docs)

Contributors

This is the result of many months of work by over a dozen people – many of whom were first time contributors to jQuery.

For now, here’s a rough list of everyone who helped, and what they helped with. (Please let me know if I forgot anyone!)

  • Paul B (Draggables, Droppables, Sortables, Resizables, Slider, Shadow, Magnifier, Gallery App)
  • John (Documentation, Theming, Demos, UI Site, Cat Herding)
  • Richard (Tree, Selectables, Sortables, Dialog, many bug fixes)
  • Tom (Flora theme, UI Site, and UI logo)
  • Sean (Theming, Dark and Light themes, Shadow, Forms)
  • Klaus (Tabs)
  • Joern (Accordion)
  • Christian (Tablesorter)
  • Adel (Downloader, Client-Side)
  • Paul H (Downloader, Server-Side)
  • Marc (Calendar)

With additional help from: Tane, Micheil, Gilles, Dmitri, and Yehuda. Much of their work will be seen in the next release of jQuery UI (including menus, toolbars, uploaders, splitters, and rich text editors).

I’d like to do a more-detailed write up of what everyone put into this project to thank everyone individually, as everyone did a really fantastic job of pulling together and making this happen. Paul, Tom, Richard, and Sean, especially – you guys did a superb job!

Once again, I hope everyone enjoys this new work – please be kind, it’s still got some very rough edges, so to speak. If you spot any bugs, please post them to the bug tracker under the “UI” component.

As always, feedback is appreciated! If you’d like to let us know what you think, please post to the jQuery UI Mailing List, or hop on irc.freenode.net #jquery-ui, as those are the best place to be able to find us.

Enjoy!

If you like what you see, feel free to give it a digg.

jQuery 1.2: jQuery.extend(“Awesome”)

Posted on by
Attend jQueryCamp Boston!
We’re having a free one day conference this October and most of the jQuery team will be there. Come along, ask questions, and meet the people who build the library that you love!

This is a massive new release of jQuery that’s been a long time in the making – and it’s ready for your consumption!

We’ve put the full jQuery 1.2 release notes on a page of it’s own, since there’s so much to dig through. REMEMBER, features were removed in 1.2, so please be sure to read the notes on how to upgrade before doing so.

As always, there’s going to be bugs, so please submit them to the bug tracker and we’ll try to get them sorted out, right away. You can probably expect a minor bug fix release within the week to take care of any pressing issues.

jQuery 1.2 (Full Release Notes)

Download

jQuery 1.2: (How To Upgrade)

Plugins:

New Features

  • Selectors
    •  :has(selector)
    •  :header
    •  :animated
    • XPath Selector Plugin
  • Attributes
    • .val() Overhaul
  • Traversing
    • .map()
    • .prevAll() / .nextAll()
    • .slice()
    • .hasClass()
    • .andSelf()
    • .contents()
  • Manipulation
    • .wrapInner() / .wrapAll()
    • .replaceWith() / .replaceAll()
    • Event Cloning
  • CSS
    • .offset()
    • .height() / .width() for document and window
  • Ajax
    • Partial .load()
    • Cross-Domain getScript
    • JSONP
    • .serialize() Overhaul
    • Disable Caching
  • Effects
    • .stop()
    • %/em Animations
    • Color Animations
    • Relative Animations
    • Queue Control
    •  :animated
    • step: Function
  • Events
    • Namespaced Events
    • .triggerHandler()
  • Internals
    • Documentation Move
    • Expando Management


Sunday, Sunday, Sunday!

This Sunday, September 16th, the brand new jQuery UI is coming to your town. Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, and modals. All completely documented, demoed, themed, and 100% Free Open Source Software.

To whet your appetite, here’s quick peak at what you can look forward to:

Sexy jQuery UI

Feel free to Digg this post.

jQueryCamp ’07 (Boston)

Posted on by

We’re going to be having the first all-day jQuery mini-conference October 27th, here in Boston, MA. Already, a large portion of the jQuery team will be attending and giving talks – so if you’re interested in meeting some of the people who’ve helped to make jQuery possible and chatting with fellow developers, then this is a fantastic place to do it!

This event will be immediately following the Ajax Experience conference. A number of people are coming to both events, generally sponsored as business travel by their employer. If you need any more details about the events in order to coordinate that, please let me know.

Be sure to add yourself to the registration list so that we know how large of a venue to get. Hope to see everyone there!

If you, or your company, is interested in sponsoring this event, please contact John Resig. We’re generally looking for a couple hundred dollars to help defray the cost of food – and if we get enough, t-shirts for those who attend.

jQuery 1.1.4: Faster, More Tests, Ready for 1.2

Posted on by

We’re pleased to announce the latest release of jQuery: jQuery 1.1.4. Barring any horrible mistakes, this release will be the last of the 1.1.x branch – leading us up to the release of jQuery 1.2 in September.

You can download the release from the jQuery Google Code page:

Download:

Improvements

A number of improvements have gone into this release, in addition to all of the normal bug fixes.

Any Name jQuery

jQuery has taken a big step to become the first major JavaScript library completely capable of renaming itself. Previously, functionality was provided to rename the oft-used ‘$’ shortcut for ‘jQuery’ – but now you can also rename both ‘$’ and ‘jQuery’. This allows for two fantastic results:

  • You can now include multiple versions of jQuery, simultaneously, on the same page.
  • You can now embed jQuery into the namespaces of other objects and libraries, for example:
    // With the Dojo Toolkit
    dojo.jquery = jQuery.noConflict(true);
    dojo.jquery("#elem div").slideDown("slow");
    // or with Yahoo UI
    YAHOO.query = jQuery.noConflict(true);
    YAHOO.query("span.hidden").removeClass("hidden");

Speed Improvements

What would a release be without some speed improvements? We took the opportunity to step beyond any previously-released speed test suites and improve the speed of the three most commonly used portions of jQuery: ID selectors, tag name selectors, and each() loops. It’s absolutely critical that each of these items are made as fast as possible, as they have the possibility of being re-used endlessly, and repeatedly.

Here’s the test suite used to analyze the speed of the three changes.

$(“#id”) Improvements

Browser jQuery 1.1.3 jQuery 1.1.4 % Improvement
IE 6 651ms 70ms 830%
Firefox 2 1355ms 27ms 4919%
Safari 3 101ms 14ms 620%
Opera 9 270ms 62ms 335%
Average improvement: 1676%

$(“elem”) Improvements

Browser jQuery 1.1.3 jQuery 1.1.4 % Improvement
IE 6 661ms 451ms 47%
Firefox 2 1717ms 143ms 1100%
Safari 3 99ms 83ms 19%
Opera 9 226ms 198ms 14%
Average improvement: 295%

.each() Improvements

Browser jQuery 1.1.3 jQuery 1.1.4 % Improvement
IE 6 200ms 30ms 567%
Firefox 2 468ms 29ms 1514%
Safari 3 17ms 11ms 54%
Opera 9 45ms 25ms 80%
Average improvement: 554%

Test Suite Overhaul

This is very big news – and should be especially so to most developers out there. The jQuery test suite has been completely re-tooled and improved from the ground up for stability. A brand new swath of Animation and Ajax tests have been integrated bringing jQuery’s total test count to over 800 tests!

Additionally, the test suite completely passes with no errors in all the major browsers that we support: Firefox 2, Safari 3, Internet Explorer 6, and Opera 9 (Safari 2 and IE 7 not shown for brevity). Proof:

In the future, we’re working to improve our coverage of the Event, Attribute, and CSS portions of jQuery – undoubtedly bringing us to over 1000 tests very soon.

Additionally, it should be noted that the jQuery test suite is now embedded in the Mozilla test suite – running against every commit of the upcoming Firefox 3 release. You can feel safe knowing that in the newest release of Firefox, everything will just keep working, as you would expect it to.

Bug Fixes

53 tickets have been closed for this release. You can read the full details on the the bug tracker (this includes fixes that went in to jQuery 1.1.3.1).

A bunch of large issues were resolved, including issues related to HTML script evaluation, Safari CSS Computed Style access, and Ajax settings manipulation.

New Functionality

A couple pieces of new functionality have been introduced. The first two of which, .slice() and :has(), are going to be a part of jQuery 1.2, but their existence is obligated by some deprecated functionality (see below). The new changes to extend() and noConflict() were put in order to be able to fix some long standing bugs in jQuery.

.slice()

You may recognize this method name from the .slice() method that exists on JavaScript arrays – you’re in luck because it behaves identically. This is a great method for chopping apart jQuery objects and getting to the elements inside of them. All of the following are valid ways to use the slice() method:

$("div").slice(0,1); // First div
$("div").slice(-1); // Last div
$("div").slice(1,-1); // All divs but the first and last
$("div").slice(1,3); // The second and third div
$("div").slice(7,8); // The eighth div

:has()

This new selector is a replacement for the current way of checking for elements inside of another element (div[p]). You can now use this selector just as you would that particular XPath selector, like so:

// All divs with a paragraph inside
$("div:has(p)")
// All anchors with an image inside
$("a:has(img)") 
// All divs that have an anchor inside that have an image inside
$("div:has(a:has(img))")

Deep, recursive .extend()

This has been a frequently-requested addition to the jQuery .extend() method. This change allows you to deeply merge nested objects (as opposed to having them overwrite each other). This is best demonstrated through an example:

// Normal .extend()
jQuery.extend(
  { name: "John", location: { city: "Boston" } },
  { last: "Resig", location: { state: "MA" } }
);
// Result:
// => { name: "John", last: "Resig", location: { state: "MA" } }
// New Deep .extend()
jQuery.extend( true,
  { name: "John", location: { city: "Boston" } },
  { last: "Resig", location: { state: "MA" } }
);
// Result:
// => { name: "John", last: "Resig",
//      location: { city: "Boston", state: "MA" } }

.noConflict(true)

As described previously, this addition to .noConflict() allows you to completely rename both the ‘jQuery’ namespace and the ‘$’ shortcut, while also rolling back any changes those introductions may have done. You can use this new shortcut like so:

// Give jQuery a custom name:
var jq = jQuery.noConflict(true);
jq("#id div").hide();

// Both Fail - $ and jQuery have been renamed:
$("#id div").hide();
jQuery("#id div").hide();

This trick can also be used to push jQuery into an existing namespace, like so:

// Put jQuery in a namespace:
var obj = {};
obj.jq = jQuery.noConflict(true);
obj.jq("#id div").hide();

Deprecated Functionality

We are deprecating a number of methods in jQuery 1.1.4 in preparation for the API changes in the upcoming jQuery 1.2. Wherever possible, we’ve provided alternate methods for performing actions.

With jQuery 1.2, as with the jQuery 1.1 release, a backwards compatibility plugin will be provided. Thus, if you wish to continue using these particular techniques, you’ll be able to use that plugin and continue doing so.

Additionally, in order to handle the XPath changes another, separate, plugin will be released that will handle XPath selector functionality in jQuery. This plugin will be made available along with the jQuery 1.2 release.

Selectors

$("div//p") XPath Descendant Selector
Please use the CSS $("div p") selector instead. Or, when jQuery 1.2 is released, use the new XPath Plugin.

$("div/p") XPath Child Selector
Please use the CSS $("div > p") selector instead. Or, when jQuery 1.2 is released, use the new XPath Plugin.

$("p/../div") XPath Parent Selector
Please use the $("p").parent("div") selector instead. Or, when jQuery 1.2 is released, use the new XPath Plugin.

$("div[p]") XPath Contains Predicate Selector
Please use the new $("div:has(p)") selector instead. Or, when jQuery 1.2 is released, use the new XPath Plugin.

$("a[@href]") XPath Attribute Selector
Note: While this selector is being deprecated in this release, it will not be removed in jQuery 1.2. Come jQuery 1.2, it’ll be recommended that you use the CSS selector $("a[href]") instead. Or, when jQuery 1.2 is released, use the new XPath Plugin.

DOM Manipulation

$("div").clone(false)
Calling the clone method with an argument is being deprecated (the clone method, as a whole, is being kept). Instead of calling .clone(false) you should now do: .clone().empty() instead.

DOM Traversal

$("div").eq(0)
This method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method. You can duplicate .eq() like so:

$("div").slice(0,1);

Additionally, .eq(0) can be duplicated in the following ways:

$("div:eq(0)")
$("div:first")

$("div").lt(2)
This method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method. You can duplicate .lt() like so:

$("div").slice(0,2);

Additionally, .lt(2) can be duplicated in the following way:

$("div:lt(2)")

$("div").gt(2)
This method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method. You can duplicate .gt() like so:

$("div").slice(3);

Additionally, .gt(2) can be duplicated in the following way:

$("div:gt(2)")

Ajax

$("#elem").loadIfModified("some.php")
This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true,
  success: function(html){
    $("#elem").html(html);
  }
});

$.getIfModified("some.php")
This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true
});

$.ajaxTimeout(3000)
This convenience method is being removed in favor of the long form use of the more-explicit $.ajaxSetup():

$.ajaxSetup({timeout: 3000});

$(...).evalScripts()
This method is no longer necessary in jQuery – all scripts included in HTML strings are automatically evaluated when injected into the document. No substitute method is needed.


As always, please let us know if you encounter any bugs in between jQuery 1.1.3.1 and jQuery 1.1.4. Thanks!