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.1: Quick Fixes for 1.2

Posted on by

jQuery 1.2.1 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.1:

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.1


Important Changes


Relative Animations

There was a serious error in the API for the new relative animations that caused a conflict with existing animation styles. To resolve this, in order to do a relative animation, you must now use the following syntax:

 $(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

With += meaning “Add to the current position” and -= meaning “Take away from the current position”.


.eq()

Due to some very-persuasive arguments, and a great deal of reconsideration, .eq() has been brought back. A great number of plugins rely on this single method – and the alternative provided by .slice() simply wasn’t as elegant a solution as what was originally provided.

jQuery 1.2.1 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 Minified (14kb with gzipping)
jQuery Packed (26kb)
Regular (77kb)

Important Changes

Relative Animations

There was a serious error in the API for the new relative animations that caused a conflict with existing animation styles. To resolve this, in order to do a relative animation, you must now use the following syntax:
$(...).animate({ height: "+=50px", width: "-=20%", fontSize: "+=2em" });

With += meaning “Add to the current position” and -= meaning “Take away from the current position”.

.eq()

Due to some very-persuasive arguments, and a great deal of reconsideration, .eq() has been brought back. A great number of plugins rely on this single method – and the alternative provided by .slice() simply wasn’t as elegant a solution as what was originally provided.

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.