- jQuery 1.6
- jQuery UI 1.9
- jQuery Mobile
- MVC
- Testing
- Ajax Update (jQuery 1.5)
- Deferreds
- Mobile Performance
Thanks for coming!
jQuery Conference Highlights is an HTML5 presentation.
Use the left ← and right → arrow keys or your mouse wheel to navigate.
Some other general stuff that I learned about.
javascript:void(0) use javascript://jQuery usage is up to 44%, we need to know about it
$("#el").css("height", "+=10");
// same as:
var height = $("#el").height();
height += 10;
$("#el").css("height", height);
.prop() is added and separated from .attr() (selectedIndex) consequently
.attr() is over 100% faster.
.map() will take objects as well as arrays.
.is(), .filter(), and .find() will take elements.
valHooks are added to allow override the get/set behavior of .val()
lots of other cool stuff, check the changelog for beta 1
Several new controls on the horizon:
They are super awesome functions that store state. They fire callbacks when they are completed, successful or failed.
var myDeferred = $.Deferred();
// now bind some functions
myDeferred.done(function() {
$("#dResults").html("sweet!");
});
myDeferred.fail(function() {
$("#dResults").html("oh noes!");
});
So what's the point? It's more likely that you want to do something that you'd like to wait until it's been completed.
var doSomethingLong = function() {
var deferred = $.Deferred();
// maybe you're calling a series of animations
setTimeout(function() {
deferred.resolve("awesome!");
}, 2000);
return deferred.promise();
};
So now if we were calling this:
doSomethingLong().done(function(status) { $("#dResults2").html(status); });
You can call .then(doneFn, failFn) to add one of each handler.
You can call $.when(fn, fn, fn, n, ...) to automatically create a master deferred object
out of several deferreds. So for example:
$.when(doSomethingLong(), doSomethingLonger())
.done(function(d1, d2) { console.log("both items were resolved!"); })
.fail(function(d1, d2) { console.log("as soon as one fails, this will fire"); });
Remember once the state of a deferred is set further handlers added will fire immediately (a good thing!)
There are a few other options, read the docs.
Now $.ajax() is a Deferred Object! You can still use success and error but they are just aliases
to .done() and .fail(). Why does that matter?
For example you might have an RSS widget that makes an ajax call to get the feed data as soon as the page is loaded. Then you have a second widget on the screen that needs to pull the top 5 articles out of the main RSS widget and display them in a highlighted fashion. Obviously you dont want to do that until the first one is done. Now you can simply attach another done handler onto the deferred and whenever it is resolved it will be executed. Whether the call is already complete or not.
var ns = {};
$(document).ready(function() {
ns.rss = $.ajax({
url: "somefeed",
success: function(results) { // do something with the rss feeds }
});
});
// later... when loading widget #2
ns.rss.done(function(results) { widget2.getTopFive(); });
PrefiltersPrefilters let you handle custom options for all or specific data types.
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
if(options.log) {
console.log("starting request: ", options.url);
jqXHR.success(function() { console.log("request successful"); });
jqXHR.error(function() { console.log("request error!"); });
}
});
$.ajax({
url: "get/some/data",
log: true
});
Check the docs for more info.
Converters
// List of data converters
// 1) key format is "source_type destination_type"
// (single space in-between)
// 2) the catchall symbol "*" can be used for source_type
converters: {
// Convert anything to text
"* text": window.String,
// Text to html (true = no transformation)
"text html": true,
// Evaluate text as a json expression
"text json": jQuery.parseJSON,
// Parse text as xml
"text xml": jQuery.parseXML
// Execute a script
"text script": function( text ) {
jQuery.globalEval( text );
return text;
}
}
Converter PossibilitiesHere we can convert our raw JSON data into an object.
$.ajaxSetup({
converters: {
"json contact": function(json) {
return $.map(json, function(item) {
return new Contact(item);
}
))
}
});
TransportsTransports are used internally to retrieve the underlying datatype.
$.ajaxTransport("fixture", function( options, originalOptions, jqXHR ) {
options.dataTypes.shift();
var originalType = options.dataTypes[0],
timer;
return {
send: function(headers, callback) {
timer = setTimeout(function() {
var data = options.fixture(originalSettings);
var response = {};
response[originalType] = data;
callback(200, "success", response, {});
}, 1000);
},
abort: function() {
clearTimeout(timer);
}
};
});