jQuery_promise

We use a Deferred to convert such call into a Promise!


then

Deferred Functionality

All as in Promise

then(), done(), fail() , always()

Additional

ห้องสมุดไป่ตู้
resolve()
when(promise(request)) .done(function(data){ console.log(JSON.stringify(data[0])); });

With the same use:

Example Coding

get some JSON objects load Google Visualization API when all is ready, plot charts

initiates success initiates failure

reject()

Typical Callback with Promise

Or shorter

function promise(request) { return $.Deferred(function(deferred){ request(deferred.resolve); }).promise(); }

jQuery Mobile

iPhone, Android
jQuery Goals

unifying programming for common browsers removing browser deficiencies, bugs consistent access and manipulation of DOM chained calls sets of DOM elements simplified JavaScript simple consistent communication with the server simplifying asynchronous callbacks
var node = $('#id'); var properties = { width:node.width(), height:node.height(), text:node.html() };

Properties

Creating New DOM

create a tag, fill in attributes, append it

$.ajax(), $.get(), $.getJSON()

all return Promise

jqXHR object is a Promise You can make your own Promises

Typical Callback into Promise

Problem:

Many APIs offer asynchronous calls with a callback function

JSON, XML, HTML, text files no page refresh – dynamic, partial page update based upon user events parallel requests

it is "asynchronous",



$.ajax('/~janst/data.txt',{ success: function(data){ alert('data:' + data); } });

deferred / promise
Workflow

find set of Dom elements

an array

do something with / to each DOM element jQuery function


finds a set, or is applied to the set with parameters

same as


or

Looping through DOM

Make all elements of the same class clickable

$('.clickable').click(function(){ alert('aloha'); });

Or, if the it's not that simple

changes all elements in the set in the same way returns a set returns properties of the set

without parameters


Since a set is returned and function are applied to a set, calls can be chained

good example of a closure

Communication with Server

AJAX (Asynchronous JavaScript and XML) communicates with server via XMLHttpRequest object can send or receive a variety of formats
called when success

done()


fail()

called on error
called whether success or failure pipe(), isResolved(), isRejected()

always()


other (deprecated)

Predefined Promises

documentation is adequate, but could be better (examples)


standard for web development small

minified jQueryUI


Additional libraries

UI across browsers

e.g. request(callback) with request(function(data){ console.log(JSON.stringify(data)); }); function promise(request) { var deferred = $.Deferred(); request(deferred.resolve); return deferred.promise(); } when(promise(request)) .done(function(data){ console.log(JSON.stringify(data[0])); });

very succinct code
Example

Chained calls

$('#id').html('text').addClass('wrapper') .width(200).height(400) .css({top:'20px', margin:'auto'}) .click(function(){ alert('aloha'); });


$.get() returns a promise
promises can be chained Promise is a subset of Deferred watch out: data1[0], data2[0]
Promise Functionality

then()

to be called after success

$('<div>').attr({id:'row'}) .addClass('wrapper').appendTo($('body'));
$('<div>').appendTo($('body')) .attr({id:'row'}).addClass('wrapper'); $('body').append($('<div>').attr({id:'row'}) .addClass('wrapper'));

$'.clickable').each(function(i, clickable){ clickable.click(function(){ alert(i == 0 ? 'aloha' : 'hi'); }); }); each inner function click has access to its own i its outer (anynomous) function
Jquery and Promise
ICS 665 Jan Stelovsky