Cooking with jQuery Presentation - Bad Request

THE jOUERY COMPANY

http://appendto.com

Copyright © 2010 appendTo, LLC.

OSCON jQuery Training

Introduction to jQuery

Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Introduction to jQuery ‣ The jQuery Project ‣ Including jQuery ‣ The jQuery Object ‣ Introduction to JavaScript ‣ Lifecycle of a Page



The jQuery Project



jQuery Project - jquery.org (Software Freedom Conservancy)

jQuery Core

jQuery UI

jquery.com

jqueryUI.com

Sizzle JS

QUnit

sizzlejs.com

qunitjs.com



‣ jquery.com

Downloading

‣ api.jquery.com

Documentation

‣ forum.jquery.com

Community

‣ meetups.jquery.com ‣ plugins.jquery.com ‣ jqueryui.com

Local Community Extending

Project Supported UI Library



Including jQuery



Locations ‣ http://code.jquery.com/jquery-1.4.2.min.js ‣ SSL vs. Non SSL? ‣ src=“//code.jquery.com/jquery-1.4.2.min.js”



Source

Minified Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


The jQuery Object function jQuery(selector) { ... } // Select an element with jQuery jQuery(‘body’); // Use the $ for brevity var $ = jQuery; $(‘body’);



Introduction to JavaScript



Introduction to JavaScript ‣ Script blocks ‣ Quotes and Whitespace ‣ Variables ‣ Functions ‣ Object-Hash ‣ Objects



Script Blocks ‣ Scripts can be included inline ‣ // Your script here

‣ Or externally ‣



Quotes & Whitespace // Single Quotes var name = ‘John’; // Double Quotes var name = “John”; // Whitespace var name

=

‘John’;

// Terminate statements with a semi colon; // Will work, but bad practice! var name = ‘John’ Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Variables ‣ Variable names may include a-zA-Z0-9_$ as valid characters ‣ Variable scope is applied through the use of the var keyword ‣ Variables have type: ‣ object, number, string, boolean ‣ array(object), function(object)



Variables // String var name = ‘John’; // Integer(number) var age = 30; // Array var children = [‘Jane’, ‘Jimmy’]; // Boolean var isMarried = true;



Functions function alertName() { alert(‘Hello John’); } // Accept arguments function alertName(name) { alert(‘Hello ‘ + name); } // Call the function alertName(‘John’); //Hello John



Functions // Function assignment var alertName = function(name) { alert(‘Hello ‘ + name); } // Call the function alertName(‘John’); //Hello John



Variable Scope var name = ‘John’; function myFunction() { alert(‘Name is: ‘ + name); } ... myFunction(); //Name is John



Variable Scope var name = ‘John’; function myFunction() { var name = ‘Jim’; alert(‘Name is: ‘ + name); }



Object-hash (Object Literal) // Empty object var person = {}; // Object-hash may contain key/values var person = { name: ‘John’, age: 30, children: [‘Jane’, ‘Jimmy’], isMarried: true };



Object var person = { name: ‘John’, age: 30, introduceYourself: function() { alert(this.name + ‘ is ‘ + this.age); } }; person.introduceYourself();

//John is 30



Lifecycle of a Page



Lifecycle of a Page ‣ Initial HTTP Request ‣ Load Scripts, Stylesheets and Images ‣ Scripts block! ‣ Head first style, scripts later



Page Load $(‘p’).css(‘color’, ‘red’); //magic
Hello world!



DOM Ready // Callback function function domIsReady() { $(‘body’).append(‘Hello world’); //magic } $(document).ready(domIsReady);



Page Load function domIsReady() { $(‘p’).css(‘color’, ‘red’); //magic } $(document).ready(domIsReady);
Hello world!


Page Load
Hello world!
$(‘p’).css(‘color’, ‘red’); //magic



Questions?



jQuery and Selectors



jQuery and Selectors ‣ Selectors ‣ Compound Selectors ‣ Selecting by the API ‣ The Context Argument



Selectors // Select By ID

$(‘#foo’);



Selectors // Select by class

$(‘.myClass’)



Selectors // Select by tag

Apple

Pear

$(“li”);

Apple

Pear



Compound Selectors

$(‘p.important,p.warning’);



Compound Selectors ‣ As of 1.4+ elements are always returned in document order



Select By Relationship



Select By Relationship // Children by method

Fork

Spoon

$(“ul”).children();

Fork

Spoon



Select By Relationship // Children by selector

Fork

Spoon

$(“ul > li”);

Fork

Spoon



Select By Relationship // Siblings by method
link
Lorem Ipsum

another link
Lorem Ipsum

$(‘a’).siblings(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Select By Relationship // Siblings by method
link
Lorem Ipsum

another link
Lorem Ipsum



Select By Relationship // Parent by method
link
Lorem Ipsum

another link
Lorem Ipsum

$(‘a’).parent(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Select By Relationship // Parent result
link
Lorem Ipsum

another link
Lorem Ipsum



Select By Relationship // Descendant by method

Fork Click to use

Spoon Click to use

$(“ul”).find(‘a’);

//selector within find method

Fork Click to use

Spoon Click to use



Select By Relationship // Descendant by selector

Fork Click to use

Spoon Click to use

$(“ul a”);

Fork Click to use

Spoon Click to use



Selector Pitfalls //Over selection $(‘div#myId’); vs. $(‘#myId’); //Under selection $(‘.randomClass’); vs. $(‘div.randomClass’);



The Context //Entire Document $(‘div’) //Scope your selector //$(‘selector’, ) $(‘#table’).find(‘selector’) $(‘a’).click(function() { $(‘span’, this)... });



The Context ‣ Two different scoping methods ‣ $(‘selector’, this) ‣ $(this).find(‘selector’) ‣ Can access context with the context property ‣ 1.3 and later



Context Pitfalls var $mySelection = $(‘selector’, ‘#myid’); var $mySelection.context = ? var $mySelection2 = $(‘selector’, $(‘#myid’)[0]); var $mySelection2.context = ?



Questions?



jQuery and Methods



jQuery and Methods ‣ Do Something ‣ Showing and Hiding ‣ Iteration ‣ Styling ‣ Behavior



Do Something $('p').bind('click',function(){ $(this).effect('drop'); }); // hides element by pulling it left



Do Something
One

Two

Three
// Find Something $(‘p’) // Do Something $(‘p’).hide(); // Generic Syntax $(‘p’) . ( [PARAMETERS] );



Showing and Hiding



Showing and Hiding // HTML
One

Two

Three
// Show the elements $(‘p’).show(); // Hide the elements $(‘p’).hide();



One

Two

Three



One

Two

Three



Iteration



Iteration
One

Two

Three
$(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Iteration
One

Two

Three


Iteration
One

Two

Three


Iteration
One

Two

Three


Iteration ‣ The anonymous function



The Anonymous Function function foo() { ... }



The Anonymous Function function foo() { ... } var foo = function() { ... } //do this $(document).click(foo); //dont do this $(document).click(foo());



The Anonymous Function function foo() { ... } var foo = function() { ... } $(document).click(foo); $(document).click(function() { ... });



Iteration // HTML
One

Two

Three
// Changes all elements returned // via Implicit Iteration $(‘p’).css(‘color’,‘red’);



“Each”itis AntiPattern // HTML
One

Two

Three
// Changes all elements returned // via incredibly inefficient explicit iteration $(‘p’).each(function(i,v){ $(this).css(‘color’,‘red’); });



Styling



Styling // HTML
One

Two

Three
$(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’);



Styling //
Three




Styling //
Three




Styling //
Three




Styling
One

Two

Three
$(‘p’).css(‘color’,‘red’); $(‘p’).css(‘font-weight’,‘bold’); $(‘p’).css({ color: ‘red’, fontWeight: ‘bold’ }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Styling
One

Two

Three
$(‘p’).css(‘color’,‘red’); $(‘p’).css(‘font-weight’,‘bold’); $(‘p’).css({ ‘background-color’: ‘blue’, fontWeight: ‘bold’, border: ‘1px solid black’ }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Behavior



Behavior // HTML
One

Two

Three
$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); });



Behavior // HTML
One

Two

Three
$(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’); }, function(event) { $(this).css(‘color’, ‘’); });



Behavior // HTML
One

Two

Three
// Add event $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); // Remove event $(‘p’).unbind(‘click’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Questions?



Chaining and Sentences



Chaining and Sentences ‣ Method Chaining ‣ The Stack Architecture ‣ Finding vs. Filtering Elements



Method Chaining



Method Chaining $(‘#myForm a’) .addClass(‘.highlight’) .click(function(){...}) .hover(function(){...},function(){...});












What Breaks the Chain? //Getters vs. Setters $(...) //jQuery selector .html(‘Hello world’) .addClass(‘hello’) $(...) .html() .addClass(‘hello’)



What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) //non breaking .addClass(‘hello’) $(...) .html() .addClass(‘hello’)



What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) //class will be added $(...) .html() .addClass(‘hello’)



What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) //jQuery selector .html() .addClass(‘hello’)



What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) .html() //breaking .addClass(‘hello’)



What Breaks the Chain? //Getters vs. Setters $(...) .html(‘Hello world’) .addClass(‘hello’) $(...) .html() .addClass(‘hello’) //runtime error



What Breaks the Chain? //put getter last var myHtml = $(...) .addClass(‘hello’) .html(); //store selection in variable //when multiple getters //are needed var $mySelection = $(...); var myHtml = $mySelection.html();



The Stack Architecture



jQuery Collections $(‘body’)

(Buckets)

[body]

.find(‘p’) .find(‘a’)

[p, p, p] => [body] [a, a] => [p, p, p] => [body]

.addClass(‘foo’) .end() .end()

[p, p, p] => [body] [body]



Method Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’);



Finding vs. Filtering



Finding Elements $(‘body’)

[body]

.find(‘p’) .find(‘a’)

[p, p, p] => [body] [a, a] => [p, p, p] => [body]

.addClass(‘foo’) .end() .end()

[p, p, p] => [body] [body]



Filtering Elements $(‘a’)

[a, a.foo, a]

.filter(‘.foo’)

[a.foo] => [a, a.foo, a]

.attr(‘href’, ‘http://appendto.com’) .end()

[a, a.foo, a]



Find vs. Filter ‣ find() searches the DOM for descendants of elements in the current jQuery wrapped collection

‣ filter() searches the current jQuery collection and returns a reduced set (sub set)



Questions?



jQuery and DOM Manipulation



jQuery and DOM Manipulation ‣ Creating Elements ‣ Inserting Elements ‣ Removing Elements ‣ Cloning Elements ‣ Wrapping Elements ‣ Attributes ‣ Data



Creating Elements



Creating Elements $(‘
’); // Creates ...
var ul = $(‘
Hello
’); // Creates ...

Hello



Creating Elements // New in 1.4 $("
", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }); // Clicking toggles the class
Click me!



Inserting Elements



Inserting Elements // Before
Apple

Orange
$(‘p’).after(‘’); // After
Apple

Orange



Apple

Orange
$(‘p’).before(‘’); // After
Apple

Orange



Apple

Orange
$(‘#apple’).prepend(‘’); $(‘#orange’).append(‘’); // After
Apple

Orange



// Before
Apple

Orange
$(‘’).prependTo(‘#apple’); $(‘’).appendTo(‘#orange’); // After
Apple

Orange



Element Creation Best Practice //Use object literal syntax for single (non-nested) element creation //If creating nested elements use a single string //yes $(‘
link text
’) .appendTo(‘body’); //slower $(‘link text’) .appendTo(‘
’) .appendTo(‘body’); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Removing Elements



Removing Elements // Before

Red

Green

// Removing Elements Directly $(‘p’).remove(); // After



Empty Elements // Before

Red

Green

$(‘p’).empty(); // After



Detaching Elements // Before

Foo Bar

var $bucket = $(‘p’).detach(); $bucket.insertAfter(‘#container’); // After

Foo Bar


Cloning Elements



Cloning Elements // Before
The Source
// Copies the element instead of moving it $(‘#source’).clone().appendTo(‘body’); // After
The Source

The Source



Cloning Elements // Before
The Source
// Copies the element instead of moving it $(‘#source’).clone(true).appendTo(‘body’); // After
The Source

The Source



Modifying Elements



Wrapping Elements // Before
Hello world

Foo bar
$(‘p’).wrap(‘
’);

// After
Hello world

Foo bar



Hello world

Foo bar
// As a group $(‘p’).wrapAll(‘
’); // After
Hello world

Foo bar



Hello world

Foo bar
// Wrapping Children $(‘p’).wrapInner(‘’); // After
Hello world

Foo bar



Unwrapping Elements

(new in 1.4+)

// Before
Hello world

Foo bar
//Individually $(‘p’).unwrap(); // After
Hello world

Foo bar



Attributes



.attr() // Before $(‘#logo’).attr(‘src’, ‘logo.png’); // After



.attr() // Markup var title = $(‘#logo’).attr(‘title’); //title === “Hello world”



.attr() // Before $(‘#logo’).attr({ src: ‘logo.png’, alt: ‘Company logo’ }); // After



.attr() // Before $(‘#logo’).attr(‘class’, function() { var c = [‘a’, ‘b’, ‘c’]; var r = Math.floor( Math.random() * 3 ); return c[r]; }); // After (randomized class name) Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Element Contents
HEADER
// Returns ‘HEADER var theHtml = $(‘#header’).html(); $(‘#header’).html(‘
One
’);

One



Element Contents
HEADER
// Returns ‘HEADER’ $(‘#header’).text(); $(‘#header’).text(‘Hello world’);
Hello world


.val() // Returns ‘foo bar’ $(‘#email’).val(); // Sets value to ‘The value’ $(‘#email’).val(‘The value’); $(‘select’).val([ ‘red’, ‘green’ ]);



Data



Data // HTML

One

// Potential for a Memory Leak var elem = $(‘#myDiv’)[0]; elem.foo = new String(‘xyz’);



Data // HTML

One

// Cross Browser Safe Method to attach data $(‘#myDiv’).data(‘foo’, new String(‘xyz’)); var myVar = $(‘#myDiv’).data(‘foo’); $(‘#myDiv’).removeData(‘foo’);



Data

(new in 1.4+)

var object1 = { abc: 123 }; var object2 = { xyz: 789 }; $(‘#myDiv’).data(‘object1’, object1); $(‘#myDiv’).data(‘object2’, object2); var objects = $(‘#myDiv’).data(); objects.object1; objects.object2;



Questions?



jQuery and Events



jQuery and Events ‣ Binding Events ‣ Binding Multiple Events ‣ The Event Object ‣ Event Namespacing ‣ Event Propagation



Binding Events



jQuery Event Shortcuts // Binding an event $('a.tab').click(function(){ // event handling code $(this).css(‘color’, ‘red’); }); // Binding an event $('a.tab').mouseover(function(){ // event handling code $(this).css(‘color’, ‘red’); });



Common Types of Events ‣ click, dblclick, mouseover, mouseout ‣ mouseenter, mouseleave ‣ change, focus, blur ‣ keydown, keyup, keypress ‣ scroll, resize



Hover Shortcut // mouseenter, mouseleave $(‘li’).hover( function() { $(this).addClass(‘hover’); }, function() { $(this).removeClass(‘hover’); });



Hover Shortcut // mouseenter, mouseleave $(‘li’) .bind(‘mouseenter’, function() { $(this).addClass(‘hover’); }) .bind(‘mouseleave’, function() { $(this).removeClass(‘hover’); });



Hover Shortcut // Optimal hover $(‘li’) .hover(function(evt) { var add = evt.type == ‘mouseenter’; $(this).toggleClass(‘hover’, add); });



Hover Shortcut // Optimal hover $(‘li’) .hover(function(evt) { $(this).toggleClass(‘hover’, evt.type == ‘mouseenter’); }); $(‘li’) .bind(‘mouseenter mouseleave’,fn);



Binding Events with .bind() // Binding an event $('a.tab').bind('click',function(e){ // event handling code $(this).css(‘color’, ‘red’); }); // Unbinding an event $('a.tab').unbind('click');



Binding Events // Bind an event to execute once $('a.tab').one('click',function(e){ // event handling code $(this).css(‘color’,‘red’); });



Binding Multiple Events



Binding Multiple Events $(‘div’).bind(‘mouseover mouseout’, function(e) { if ( e.type == ‘mouseover’ ) { $(this).addClass('highlight'); } elseif ( e.type == ‘mouseout’ ) { $(this).removeClass('highlight'); } }); $(‘div’).unbind(‘mouseover mouseout’); $(‘div’).unbind(); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Binding Multiple Events $('a.tab').hover( function(e){ $(this).addClass('highlight'); }, function(e){ $(this).removeClass('highlight'); } ); // Unbind the hover event $(‘a.tab’).unbind('mouseenter mouseleave')



Binding Multiple Events // Arbitrary number of functions to execute cyclically on click $('a.tab').toggle( function(){ $(this).css('color','red'); }, function(){ $(this).css('color','yellow'); }, function(){ $(this).css('color','green'); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


The Event Object



The Event Object ‣ Event Object Properties

type timeStamp

pageX pageY

target relatedTarget currentTarget

data result which



The Event Object ‣ event.type

The name of the event (all lowercase)

‣ event.target

The element that the event originated at

‣ event.pageX, event.pageY

Coordinates in pixels of mouse position on page (not populated for key events)



Event Namespacing



Event Namespacing ‣ Tagging for event handlers ‣ Added in jQuery 1.2

namespace post - http://bit.ly/aCaFXS

‣ Simplifies unbinding of events



Binding Namespaced Events $(‘div’) .bind(‘click’, fn) .bind(‘click.foo’, fn) .bind(‘mouseover.foo’, fn); // Unbind click.foo event $(‘div’).unbind(‘click.foo’); // Unbind all .foo namespaced events // click.foo, mouseover.foo $(‘div’).unbind(‘.foo’);



Event Propagation



Event Propagation - Anchor Tag
Link
$(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); });



Event Propagation - Paragraph Tag
Link
$(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); });



Event Propagation - Paragraph Tag
Link
$(‘div’).click(function(evt) { // evt.target == a alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Event Propagation - Div Tag
Link
$(‘#navigation’).click(function(evt) { // evt.target == anchor tag alert(‘clicked div!’); // this = Reference to div DOM element $(this).addClass(‘active’); }); $(‘a’).click(function() {

alert(‘clicked!’);

});



Event Propagation - Stopping Prop.
Link
$(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function() { alert(‘clicked!’); return false; }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Event Propagation - Stopping Prop.
Link
$(‘div’).click(function() { alert(‘clicked div!’); }); $(‘a’).click(function(evt) { alert(‘clicked!’); evt.stopPropagation(); evt.preventDefault(); return false; // Same as two lines above }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Event Propagation - Returning False Stop events from bubbling Prevent the default event action from occurring



Live Events



Live Events - Binding // Before
One
// Code $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); $(‘
’).text(‘Two’).appendTo(‘body’); // After
One

Two


Live Events - Unbinding // Remove with .die() $(‘p’).die(); // .die() also accepts an event type $(‘p’).die(‘click’); // Namespace Example $(‘p’).die(‘click.one’);



Live Events - Namespacing // .live() performs just like .bind() $(‘p’).live(‘click dblclick’, function(e){ if(e.type == ‘click’) { ... } }); // .live() can take namespaced events $(‘p’).live(‘click.one’,function(e) { alert(‘Click.one’); });



Live and delegate //1.4+ - live events can be given a context $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); }); //delegate is short hand method for this best //practice pattern $("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); }); Copyright © 2010 appendTo, LLC. THE jOUERY COMPANY


Triggering Events // HTML
One
// Assign the event $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); // Trigger the event manually $(‘p’).trigger(‘click’);



Triggering Events // HTML
One
// Assign the event $(‘p’).live(‘click’,function() { alert(‘P Pressed’) }); // Some Event types have shortcuts $(‘p’).click();



Event Parameters



Event Data - Event Object // HTML
One
// Define the custom event var foo = ‘bar’; $(‘p’).bind(‘click’, {msg: foo}, function(evt){ alert(‘Parameter: ’+ evt.data.msg) } );



Questions?



jQuery and Ajax Lesson 7



jQuery and Ajax ‣ Request Types ‣ Data Formats ‣ Request Callbacks ‣ Making a Request



Request Types



Request Types Core Method

Shortcuts

‣ $.ajax();

‣ $.get(); ‣ $.post(); ‣ $.getJSON(); ‣ $.getScript(); ‣ $( ... ).load();



Data Formats



Data Formats ‣ xml

Returned as DOM

‣ html

Returned as String

‣ json

Returned as Object

‣ jsonp ‣ text

Returned as Object

Returned as String

‣ script

Evaluated & Returned as String



Request Callbacks



Request Callbacks ‣ success: function(data, status, XMLHttpRequest) { ... } ‣ error: function(XMLHttpRequest, textStatus, error) { ... } ‣ complete: function(XMLHttpRequest, status) { ... }



Making a Request



Making a Request $.get(‘page.php’, function(data) { $(data).appendTo(‘body’); }, ‘html’); var data = { fname: ‘Andrew’, lname: ‘Wirick’ }; $.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’); }, ‘html’);



Making a Request JSON // Response {“names”: [“Jonathan”, “Mike”, “Andrew”], “states”: {“NE” : “Nebraska”}, “year” : “2010” }

$.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE ); });



Making a Request JSON // Response { “names”: [“Jonathan”, “Mike”, “Andrew”] }

$.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); }); });



Making a Request XML // Response Back to the future $.get(‘movies.php’, function(xml) { var title = $(xml) .find(‘movie[id=123] > title’) .text(); $(‘body’).append( title ); }, ‘xml’);



Making a Request XML // Response Some data ]]> $.get(‘movies.php’, function(root) { var title = $(root) .find(‘document’) .text(); $(‘body’).append( title ); }, ‘xml’);



Cross Domain Requests var url = ‘http://flickr.com...’; $.getJSON(url, function(json) { // Iterate the items and generate HTML });



Questions?



Thank you for coming! http://appendTo.com @appendTo


Cooking with jQuery Presentation - Bad Request

Cooking with jQuery Presentation - Bad Request

Suggest Documents

Akka Concurrency - Bad Request

Untitled - Bad Request

Equine Laminitis - Bad Request

Moral Judgment - Bad Request

Equine Laminitis - Bad Request

Realizing Utopia - Bad Request

ETORO (EUROPE) - Bad Request

U 'SG - Bad Request

Black Wattle - Bad Request

lllllllllllllllllllllllllllllllllllllllll - Bad Request

MCIP - 400 Bad Request

Keynote Paper - Bad Request

Equine Laminitis - Bad Request

Equine Laminitis - Bad Request

Download - Bad Request

Uncharitable? - Bad Request

Slide 1 - Bad Request

JP Tools - Bad Request

Untitled - 400 Bad Request

bad presentation - IDEA

Request for Presentation - arXiv

Recipes for Disaster - Bad Request

The Brass Check - Bad Request

final - Bad Request - Cranfield University