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.

jQuery 1.2 Released

Posted on by

Downloading

jQuery 1.2:
jQuery Minified (14kb with gzipping)
jQuery Packed (26kb)
jQuery Regular (77kb)

New Features

Partial .load()

Partial .load() allows you to load chunks of HTML documents into your page, filtered by a jQuery selector. This works just like a normal Ajax .load(), but you just specify a selector immediately following the URL that you’re retrieving.

Cross-Domain $.getScript

You can now use getScript to dynamically load, and execute, remote scripts. This could be used to load in jQuery plugins or other code modules.

Cross-Domain $.getJSON (using JSONP)

JSONP is a technique that allows you to transfer JSON data across multiple domains.

jQuery now supports JSONP natively – if you attempt to load JSON (via $.getJSON or $.ajax) from a remote URL then an extra callback will be provided for the server to interpret. Additionally, if the server requires a special field for specifying your own callback name you can provide it by having a “=?” in your query string.

Serialization Overhaul

The .serialize() method has seen a significant overhaul, porting the functionality provided by the jQuery Forms plugin back into the jQuery core. This will mean that the serialization of form data should now closely represent what is normally sent by the browser, to the server.

Additionally, a new .serializeArray() method has been introduced which serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with. This can be especially useful when working with large forms that you wish to process.

Disable Caching

In an $.ajax call you can now prevent requests from being cached by the browser by providing an extra cache: false flag. This will ensure that any GET requests that you might be performing will absolutely be retrieving the latest version of the page.
cache: false always sends a new request to server.

« Back to the full [[Release:jQuery 1.2|jQuery 1.2 Release Notes]].

.val() Overhaul

The simple .val() method has seen some much-needed love, making it much more useful. You can now set the checked state of groups of radios buttons and checkboxes along with setting the selected state of select options. You can achieve this by passing in an array of values, or names, of the items that you’d like to select/check. (Fails in Firefox2, radio buttons fail in IE7) It’s now possible to call .val() on select elements, to get their values.

.offset()

Brought over from the [http://jquery.com/plugins/project/dimensions Dimensions plugin], the [[CSS/offset|.offset()]] method allows you to find the offset of the element (as ‘top’ and ‘left’) from the top-left corner of the document.

.height() / .width() for document and window

The .height() and .width() now work on the document and window objects; allowing to get the height and width of the document body and the window viewport.

.stop()

Stops all the currently running animations on all the specified elements. If any animations are queued to run, then they will begin immediately.

%/em Animation

Animations can now be done using em values or percentages as well as pixel values. They can even be mixed within the same animate() call.

Color Animations

A new [http://jquery.com/plugins/project/color official jQuery plugin] that supports animating CSS colors of elements by using the new jQuery.fx.step.

Supported CSS properties: ‘backgroundColor'; ‘borderBottomColor'; ‘borderLeftColor'; ‘borderRightColor'; ‘borderTopColor'; ‘color'; ‘outlineColor’.

Colors can be specified as one of a pre-set range of named colours; in rgb format (ie ‘rgb(221,221,221)’); hex (ie ‘#dddddd’); or shorthand hex (ie ‘#ddd’).

Relative Animations

Relative animations behave just like normal animations, but their units are specified as being relatively position according to the current position of the element, rather than being an absolute position.

You can specify a relative animation by writing the number and (optional) units as string, preceded by a “+=” (for a relative animation that adds to the current position) or “-=” (that takes away from the current position).

Simultaneous Animations

As has always been the case, animations in jQuery are automatically queued, which allows animate() calls to be chained.

Now, if a queue: false flag is included in the options of animate(), then that animation will not go in the queue and will begin running immediately.

.queue() / .dequeue()

Two existing internal jQuery queueing methods have been tweaked and made more useful, for general animation use.

.queue() can be used to access and manipulate the animation queue for a particular element.

The following queueing methods were added:
* .queue()
Returns a reference to the first element’s queue (which is an array of functions).
* .queue(Function)
Adds a new function, to be executed, onto the end of the queue of all matched elements.
* .queue(Array)
Replaces the queue of all matched element with this new queue (the array of functions).

And the following dequeueing method was added: .dequeue() Removes a queued function from the front of the queue and executes it.

Extensible Animations

You can now extend jQuery animations with a function that is fired on every step of the animation that changes the style of the element being animated. It can be extended for specific css properties, or even to create a custom animation type.

For example, you can pass in an extra step function to .animate() to perform actions like animation synchronization.

Namespaced Events

This is a piece of functionality that’s especially useful for plugin authors. You can now provide a private name for the event handlers that you bind, allowing you to remove them again later (without having to maintain a private cache of all the handlers that you’re overseeing).

.triggerHandler()

A new method that can be used in addition to the original .trigger(). This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.

.wrapInner() / .wrapAll()

.wrapInner() is designed to wrap the inner child contents of each matched element (including text nodes); .wrapAll() will wrap all the elements in the matched set into a single wrapper element (this is different from .wrap() where each element in the matched set would get wrapped with an element).

.replaceWith() / .replaceAll()

replaceWith replaces all matched elements with the specified HTML or DOM elements. .replaceAll replaces the elements matched by the specified selector with the matched elements.

Cloning with Events

The .clone() method can now take an optional argument where, if true, it will also clone all the event handlers on all the cloned elements.

:has(selector)

This matches all elements that contain at least one element that matches the specified selector. This is a replacement for the XPath selector: [selector], included in jQuery 1.1 and older – :has() behaves identically.

:header

This matches all headers (h1, h2, h3, h4, h5, and h6 tags). This can be very useful for building Table of Contents for a page (especially where the order of the headers matters).

:animated

Matches elements that are currently being animated by, at least, one animation.

XPath Selector Plugin

Since XPath selectors were removed form jQuery in 1.2, a new [http://jquery.com/plugins/project/xpath XPath Selector Plugin] has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

.map()

Translate a set of elements into another set of values (which may, or may not, be elements). You could use this to build lists of values, attributes, css values – or even perform special, custom, selector transformations. This is provided as a convenience method for using $.map().

.prevAll() / .nextAll()

Allows you to find all sibling elements before, or after, the current element.

.slice()

This method behaves just like an array’s native .slice() method, allowing you to cut up the jQuery set into reusable portions.

.hasClass()

The new .hasClass() method is a simple convenience method that sits on top of [[Traversing/is|.is()]], handling its most common use case (checking for a class name).

.andSelf()

Combine the two previous sets on the jQuery stack into a single matched set.

.contents()

Find all the child nodes inside the matched elements (this included text nodes). If you perform it against an iframe element, it returns its inner document.

How To Upgrade

If you have not done so already, please upgrade to jQuery 1.1.4. This should help to remove most of the surprises in between the last version of jQuery your code was using and the current release. Go through the list of deprecated and removed features and make sure that you’re not using any of them in your code. If any plugins that you’re using still require some of the old functionality, you can feel free to include the jQuery 1.1 Compatibility Plugin or the XPath Compatibility Plugin, depending on the situation.

jQuery 1.1 Compatibility Plugin

A few pieces of functionality were removed in the jQuery 1.2 release. Including this plugin allows you have all of the features that were removed in your copy of jQuery 1.2.

The plugin would typically be used like so:

XPath Compatibility Plugin

Since XPath selectors were removed from jQuery in 1.2, a new XPath Selector Plugin has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

Color Animation Plugin

A new, official, jQuery plugin that supports animating CSS colors of elements by using the new jQuery Animation API. Supported CSS properties include: ‘backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’.

Removed Functionality

We’ve removed a number of methods in jQuery 1.2 that were relatively unused, causing confusion, or were inefficient. Wherever possible, we’ve provided alternate methods for performing the actions.

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

Additionally, in order to handle the XPath changes another, separate, plugin has been made available that will handle XPath selector functionality in jQuery.

DOM Manipulation

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 Traversing

The .eq() 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);

The .lt() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method).

The .gt() method is being deprecated for the use of the new .slice() method (which works identically to an array’s slice method).

The .contains() method is being deprecated in favor of just using a regular .filter() statement. You can duplicate .contains() like so:

$("div").filter(":contains(Your Text)");

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.

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!

SF jQuery Meetup and Ajax Experience

Posted on by

SF jQuery Meetup and Ajax Experience West

Ajax Experience West 2007
The good folks over at Ajaxian and TechTarget have put together a great conference, July 25-27. Speakers are varied, talking about the latest and greatest from the world of rich web development. See the full list of speakers and schedule. Speakers include Brendan
Eich
, CTO of Mozilla; Creator of JavaScript. Chris Wilson, Internet Explorer Platform Architect and Kevin Lynch, Chief Software Architect, Adobe. It promises to be a lively and interesting forum.

More exciting than even those speakers, there will be two jQuery representatives speaking: John Resig and Glen Lipka.

John will be giving 3 sessions, two on jQuery:

Additionally, John will be speaking on a panel, at Friday’s lunch, on the future of Ajax.

And Glen will be giving a talk on jQuery:

There will be a number of other jQuery users, and team members, in attendance (including Yehuda Katz and Michael Geary).

SF jQuery Meetup

On July 26, we are taking the opportunity to invite everyone in the jQuery community to meetup at the Gordon Biersch San Francisco Brewery for drinks appetizers and debugging. We are open source, so BYOCC (Bring Your Own Credit Card).

Yehuda Katz has special jQuery SWAG for the first 1000 25 jQueriers to buy another member of the community a drink. Additionally, we should have a couple extra copies of the brand-new Learning jQuery book by Karl Swedberg & Jonathan Chaffer.

We hope you can make it. Sign up and see you then!

More information:
http://upcoming.yahoo.com/event/220122/

jQuery 1.1.3.1

Posted on by

This is a quick bug fix release for jQuery 1.1.3. About six major issues popped up after the 1.1.3 release that we deemed important enough to resolve immediately, with a follow-up release. The full list of resolved issues can be found on the bug tracker.

If you haven’t already upgraded to 1.1.3, please just upgrade straight to 1.1.3.1 instead. Also, if you’re encountering any issues with 1.1.3, please try this release.

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

Download:

As always, be sure to let us know if you encounter any issues by submitting a bug report to the jQuery bug tracker.

About client-side form validation and frameworks

Posted on by

There is a good article about client-side form validation on the Interaction Design Blog. It describes important points to keep in mind when building your own framework for client-side validation.

Of course the alternative to building your own framework is to use an existing one. This approach yields some important advantages, amonst them the “given enough eyeballs, all bugs are shallow” principle.

Lets see how well the validation plugin currently performs on the points listed in the article:

1. Use a form validation framework or a form validation library

Check.

2. Focus on solving the big validation problems

As soon as you start developing and implementing your validation, it is easy trying to address all potential validation that is needed for all types of input. My advice is to try to catch 75-85% of the potential user input errors in the front-end validation. Trying to catch all will lead to the following:

  • Bloated code, your framework will grow too large
  • More or less impossible to test client side validation as there are too many combinations of validation that can go wrong
  • Business rules will move to the front-end.(More on how to avoid this by using Ajax later)

Well, bloated code is a problem I tried to address with lots of refactoring. The current codebase has 1446 lines (about half of it being inline documentation). A few weeks ago Dan G. Switzer took a look at the plugin and was able to provide excellent help on specific code-related problems within a few hours.

About testing: The current testsuite for the validation plugin runs 65 tests with over 350 assertions. jQuery’s testsuite runs about 500 assertions. I seems to have a good code coverage, as I added tests for all occuring issues whenever possible. Regression issues are quite likely to be catched by the testsuite, as well as it helps a lot while developing.

Testing against browser events and with AJAX is still a very difficult task, even with the AJAX support in jQuery’s testsuite.

About business rules moving to the front end: Thats more of a design and architectural problem. Avoiding that using AJAX gets supported with the upcoming 1.2 release.

3. Do Form Validation before form is submitted

The message here is to validate when the user inputs something, instead of waiting for the submit event. Pre 1.0 versions allowed you to specify a single event to check individual elements, eg. blur or keyup. That worked in some cases, and was disturbing in other cases, where the user clicked on an input and was welcomed with an annyoing error message. To address those issues, a more sophisticated system was released in 1.1. Basically the plugin waits with validation until the user blurs a field where he entered something incomplete. If the field is already marked invalid (eg. after an attempt to submit an invalid form), all elements are validated on keyup (textinputs) or click (checkbox, radio). The current implementation isn’t perfect yet, and of course feedback is appreciated.

4. Use Ajax Form Validation for business data input

A small teaser for the AJAX validation in 1.2:

$("#myform").validate({
  rules: {
    username: {
      required: true,
      minLength: 2,
      remote: "users.php"
    }
  },
  messages: {
    username: {
      required: "Enter your username",
      minLength: "At least 2 characters are necessary",
      remote: String.format("The name {0} is already in use")
    }
  }
});

The API allows you to use the same declarative style for remote validation as you are used to use for local validation. String.format creates another function that is later called with the value the user entered, resulting in something like “The name asdf is already in use” as the error message.

Check the AJAX validation preview for more details.

5. Do extensive testing of your javascript form validation

That is covered above.

6. Rewrite input data to valid formats

Now this is an interesting point. Basically the idea is to accept “20070515” as a valid date, transforming it into “2007-05-15″ for validation. I haven’t seen any specific requests for a feature like this, so if anyone is interested, let me know. Meanwhile a good idea may be to use the masked input plugin to help and assist the user typing the correct format.

7. Attach javascript form validation late in the design process

That is a very good recommendation. jQuery helps a lot with this, due to its unobtrusive nature. Design your form without any JavaScript at all, and add it later, improving the user experience (UX) as much as possible.

8. Make the script i18n- and l10n-compatible

In other words: Avoid hard-coded strings, instead make it as easy as possible to replace them with the current locale.

The validation plugin allows you to translate all default messages by just overwriting them. Its easy to include a file after the plugin file that contains something like the following:

$.extend($.validator.messages, {
  required: "Eingabe nötig",
  email: "Bitte eine gültige E-Mail-Adresse eingeben",
  ...
});

That approach works quite well. You can gather other translation in the same file, for example labels for the datepicker.

To include the proper right translation file for the user’s locale is then a mere serverside issue.

Other problems, eg. different number or date formats, can be covered by writing custom methods, or overwriting the default ones (in $.validator.methods). Methods for german date and number formats are provided by default: date (default JavaScript Date format), dateISO (1990-01-01 or 1990/01/01), dateDE (01.01.1990 or 2.12.2012) and number (100,000.59) and numberDE (100.000,59) are available. Though currently none of those validates any ranges, eg. 0001-13-50 is also a valid iso date.

9. Add callback functions to validator framework

The most important callback function the validation plugin provides is the submitHandler. It is called when a valid form is submitted, allowing you to eg. submit the form via AJAX. Others are available like errorPlacement, to customize where error messages are inserted into the DOM, eg. for table layouts.

In 1.2 a callback for invalid forms gets added, called each time the user submits a form and it is invalid. So far the showErrors callback could be used for that, but that one gets also called each time is single element is validated. The new callback can then be used to update a message like “There are 6 issues in the form below”. Showing and hiding such a message can be handled using the existing errorContainer options.

10. Make your framework/library extensible

The most important point to extend the validation plugin with your own stuff is $.validator.addMethod. It allows you to add any validation method you need. By keeping your own custom methods inside your own files it is easy to update the plugin itself.

Its quite likely that the first approach to AJAX validation will evolve into $.validator.addRemoteMethod, providing all the necessary boilerplate code for remote AJAX methods, but allowing you use any required protocol. It won’t matter if you use get or post, send a single value or the whole form to the server, and if the server returns only true or false, or an error message to display, in whatever format you prefer or need to work with. Of course it would require a bit more work to implement the method, but provides a great flexibility. Your feedback on this is essential, as I avoid to randomly guess what you may need.

I hope this gives a good idea about the current status of the form validation and its progress and should help with the descision to use it or not.

jQuery 1.1.3: 800%+ Faster, still 20KB

Posted on by

I’m pleased to announce the release of jQuery 1.1.3. After many months of testing, developing, and more testing, we have a very solid release available for download. It comes with roughly 80+ fixed bugs and a handful of enhancements for good measure. Highlights include:

  1. Improved speeds, with DOM traversal over 800% faster than in 1.1.2.
  2. A re-written event system, with more graceful handling of keyboard events.
  3. A re-written effects system (with an accompanying fx test suite), featuring faster execution and better cross-platform support.

Update – July 4th: We just finished a quick bug fix release, versioned 1.1.3.1, which fixes a couple of outstanding issues.

Download:

As always, if you find any bugs with this release, please post them to the jQuery Bug Tracker.

1.1.3 Features

Massive Selector Speed Improvements

Due to popular demand, we dug deep and made some major changes to jQuery’s selector engine. Here’s a breakdown of the speed improvements that were made to jQuery itself. All numbers are based on the SlickSpeed test suite.

Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement
IE 6 4890ms 661ms 740%
Firefox 2 5629ms 567ms 993%
Safari 2 3575ms 475ms 753%
Opera 9.1 3196ms 326ms 980%
Average improvement: 867%

Additionally, we tested the improved code base against some of the other popular selector libraries, again with the SlickSpeed test suite.

Browser Prototype jQuery Mootools Ext Dojo
IE 6 1476ms 661ms 1238ms 672ms 738ms
Firefox 2 219ms 567ms 220ms 951ms 440ms
Safari 2 1568ms 475ms 909ms 417ms 527ms
Opera 9.1 220ms 326ms 217ms 296ms 220ms

A couple things to notice when looking at the speed suite results are that:

  • We’re over 800% faster than we were in jQuery 1.1.2.
  • We’re the fastest framework in the most popular browser, Internet Explorer 6.
  • We’re the only framework that doesn’t give incorrect results.
  • And all of this comes at no expense to you — jQuery is still the same 20KB that you’ve come to expect and enjoy.

New Selectors

Unicode Selectors: This is a huge addition for those of you who want to use Unicode attribute values, IDs, class names, or tag names. You can now use them directly in jQuery selectors:

$("div.台北")
$("div#台北")
$("foo_bar台北")
$("div[@id=台北]")

Escape Selectors: A frequently requested feature you can now select elements by ID (or other selector) that uses a special character, for example this will find the div that has the ID of “foo.bar”:

$("div#foo\\\\.bar")

Inequality Selector: While this selector isn’t part of the CSS specification, it’s frequently used and included in other selector libraries, so we decided to add it in:

$("div[@id!=test]")

:nth-child() improvements: This selector allows you to locate specific child elements. We’ve supported selectors like :nth-child(1) and :nth-child(odd) since the beginning of jQuery, now we’ve added advanced :nth-child selectors, such as:

$("div:nth-child(2n)")
$("div:nth-child(2n+1)")
$("div:nth-child(n)")

Space-separated attributes: After being removed in jQuery 1.0, this selector has now been brought back by popular demand. It allows you to locate individual items in a space-separated attribute (such as a class or rel attribute).

$("a[@rel~=test]")

Animation Improvements

Speed: Animations are now significantly faster and smoother. Additionally, you can run more simultaneous animations without incurring any speed hits.

Testing: We now have a dedicated test suite for animations — which has allowed us to fix a number of pressing animation bugs that weren’t previously locatable.

DOM Event Listeners

Internally, the jQuery Event system has been overhauled to use the DOM Event system, rather than the classical “onclick” style of binding event handlers. This improvement allows you to be more unobtrusive in your use of the library (not affecting the flow of other libraries around it). Additionally, it helped to resolve some of the outstanding issues that existed with binding event listeners to IFrames.

Event Normalization

Some great steps have been taken to normalize keyboard and mouse events. You can now access the event.which property to get most details about the specific key or button that was pressed.

Multiple .is()

The .is() method can now take multiple selectors, separated by a comma. This allows you to test your jQuery set against multiple selectors.

$("div").is(":visible, :first")

Browser Version

A commonly requested feature, by plugin authors, was a way to determine what browser version their users were using. We now expose an extra property through which this information can be accessed.

jQuery.browser.version

More Bug Fixes

Please see the ticket listing for the full list of all issues resolved in this release.

The Future of jQuery

We’ve been very concerned with the direction and progress being made towards furthering the jQuery project. We’re focusing on a number of different aspects now, but the primary concern is still the advancement of the core jQuery library. We’ve spec’d out the next two releases, which you can read more about below:

jQuery 1.1.4

This will be the last release of the jQuery 1.1 branch – another bug fix release with some minor improvements. This release will also mark a number of methods as deprecated, in accordance with the upcoming jQuery 1.2 release.

We’re currently planning on having this release take place at the end of July.

jQuery 1.2

This will be the next major release of jQuery, containing a significant number of new features. The full details of this release can be found in the jQuery 1.2 Roadmap.

Your comments and feedback on this release are greatly appreciated. It’s still in planning, so nothing is completely final. We’re currently planning on releasing jQuery 1.2 by the end of August.

jQuery Books

We’re now up to 4 jQuery books being written and, just as importantly, they’re all being written by members of the jQuery team (so you’ll know that you’re getting good information).

The books and their authors are as follows:

  • Learning jQuery by Karl Swedberg and Jonathan Chaffer – due out early July 2007 (Packt Publishing).
  • jQuery Reference Guide by Karl Swedberg and Jonathan Chaffer – due out Summer 2007 (Packt Publishing).
  • jQuery Quickly by Yehuda Katz and Bear Bibeault (Manning Publishing).
  • Designing with jQuery by Glen Lipka (Manning Publishing).

This is really fantastic news. I’ve been able to read some of the pre-release chapters and I think you’re going to be in for a real treat with these books.

jQuery Talks and Conference

I’d like to announce some talks being given about jQuery in the upcoming months. Specifically, there will be a number of talks given about jQuery at both of the Ajax Experience conferences.

At the San Francisco Ajax Experience, John Resig will be giving an introductory overview to jQuery followed by an advanced jQuery talk. Glen Lipka will be giving a talk on designing with jQuery.

At the Boston Ajax Experience, John and Glen will be presenting again, and will be joined by Paul Bakaus to give a talk on developing intense applications and games with jQuery.

Since there’s going to be quite a few members of the jQuery team at the Boston Ajax Experience, we’d like to announce that we’re planning on doing a small, one day, jQuery Conference the next day after the Ajax Experience. This will be the perfect opportunity for you to meet the jQuery team and ask any nagging questions that you have. We’ll also be giving a number of talks about specific aspects of jQuery. We’ll have more details about this soon.

jQuery UI

Today, we’re also pleased to announce a secret project that we’ve been working on: jQuery UI. This project, being written by Paul Bakaus, is a whole new Drag & Drop library being developed from the ground up with speed and extensibility taken into consideration. Additionally, great care is being taken to have the code be fully documented and tested — allowing many other developers to use and help extend it.

This library will contain full code for Draggables, Droppables, Sortables, Resizables, and a Slider.

You can take a look at some of Paul’s early work in the SVN repository.

Funding and Thank You

The new jQuery UI library marks a new step for the jQuery project: This is a piece of code whose development we’re sponsoring using money donated by you, the jQuery users!

This is being made possible in two ways: first by your continued support and donations to the jQuery project, and second by a generous server donation by Media Temple. This is allowing us to focus our financial resources on other projects that’ll benefit everyone the most.

So I’d like to take this opportunity to request additional donations to help us continue funding exciting new work that you’ll be able to use in your web sites. Any help will be greatly appreciated.

Amount in $

Once again, I’d like to thank the jQuery team and everyone who has helped to make this release possible. It’s been a lot of work, but I hope you’ll be as pleased with this release as we are. Thank you — and thanks for using jQuery!

Visual jQuery Magazine: Part Deux

Posted on by

Those of you who have been around for a while know that in September of last year I published the first issue of the Visual jQuery Magazine. In October, the magazine was also released in French.

The mag had interviews with important jQuery community members (like creator John Resig, plugin editor Dave Cardwell, etc.), articles on jQuery features and implementations, and even a piece or two on alternate Javascript libraries, complete with quality graphics and original art.

The positive response was incredible, and people really seemed to like it. Unfortunately, though I’d initially planned on making the magazine a monthly publication, things fell to the wayside as my schedule got progressively more hectic. Since Issue 1 I’ve found a new job (new then; about eight or nine months old now), moved across the country (NY to CA), and gotten a huge chunk of the way through writing my first book (stay tuned for details!). Clearly, things have been busy.

The lack of Issue 2 has been bugging me since Issue 1, and I’ve decided it’s time to make it happen (this, I admit, is also largely in part to my good friend Rey Bango’s recently renewed effort to push jQuery forward). Thankfully, the magazine’s lead designer and the team of French developers/translators have all expressed an interest in helping make Issue 2 happen, which makes this goal a lot more tangible.

Issue 1 was an experiment, and it went really well. Since it was a first though, it was very much “the Yehuda show.” I’d like Issue 2 to be more of a collaboration of contributors; there are a lot of jQuery topics to explore, and a lot of team member and users with fascinating tales to tell.

As such, I’m putting the word out there. I’m looking for contributions for Issue 2 of Visual jQuery Magazine. Articles can vary in length extensively, from brief three paragraph shorts, to three page features. They can be tutorials, feature articles, interviews and lots of other things I’m sure you’ll all think of. Just a few brief (and somewhat flexible) guidelines:

  • The article must be in magazine or newspaper format (if, in fact, your submission is a piece of writing — illustrations will also be considered). I’m extremely lax on this, but it should be something you could see being in a magazine.
  • The article must be about a topic that is timely and pertinent to the jQuery community, with broad appeal.
  • The article must not be an advertisement (but it may, obviously, feature a plugin you have written if it has broad appeal).
  • The article must be factually correct.
  • The magazine staff will edit your article for grammar, space, and style. You will receive an edited copy prior to publication for approval.
  • The magazine staff will add graphics and other visual elements as appropriate.
  • Please email a proposal or brief description of your submission before spending a chunk of time working on it; that way we can avoid running out of space and ensure that everything print-worthy gets in. Email submissions and letters to the editor to editor AT visualjquery DOT com.

    As I said from the beginning of this project, I think that the magazine has real potential to open up the jQuery world to new users, and hope that by pushing the envelope of community-produced content, we can keep jQuery moving forward in it’s current positive direction. I, for one, I’m really excited about it.

    I will also be accepted advertisements, with all proceeds to go to the jQuery project. If you’re interested, please email me!

    New Plugin Repository

    Posted on by

    jQuery Plugin Repository

    One of the great aspects of jQuery is its extensibility, as evidenced by the many excellent plugins that have been developed for it. The jQuery team, and the Web team in particular, have been working hard behind the scenes to put together a repository to showcase these plugins.

    The new repository comes with a few features that are sure to help users to find what they’re looking for and determine which plugins will best suit their needs. There’s the (jQuery-based) ratings widget to let you know how highly others value each plugin. The ratings are viewable by all, and you can rate them yourself by simply registering on the site with a user name and email address. You’ll also have easier access to change logs, demos, and documentation, as well as bug reporting and feature requests.

    There are still a few rough edges to be smoothed out, and the list of plugins on the site is admittedly small so far. We’re requesting that plugin authors post their work to the new plugin repository in the next couple weeks, as we’ll be gradually phasing out the plugins wiki page.

    Special thanks to Mike Hostetler for the hours of work he put in to get the repository off to a great start.

    Check it out at: http://jquery.com/plugins/