Presentation on how to chat with PDF using ChatGPT code interpreter
Bubbles and Trees with jQuery
1. Bubbles and trees with jQuery
Web 2.0 made easy
Bastian Feder <php@bastian-feder.de>
Jakob Westhoff <jakob@php.net>
WebtechCon
November 18, 2009
http://westhoffswelt.de jakob@westhoffswelt.de slide: 1 / 30
2. About Us
Bastian Feder
Application developer
Using PHP since 2001
Using Javascript since 2002
Working on the papaya CMS since 01.2008
http://westhoffswelt.de jakob@westhoffswelt.de slide: 2 / 30
3. About Us
Jakob Westhoff
Web-developer for more than 6 years
Author of Activebar2 (used by http://ie6update.com)
Computer science student at the TU Dortmund
Active in different Open Source projects
http://westhoffswelt.de jakob@westhoffswelt.de slide: 2 / 30
4. Goals of this session
You will learn about:
jQuery basics and need to know facts
Effects and animation
Event-handling mechanisms
Asynchronous request handling (AJAX)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
5. Goals of this session
You will learn about:
jQuery basics and need to know facts
Effects and animation
Event-handling mechanisms
Asynchronous request handling (AJAX)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
6. Goals of this session
You will learn about:
jQuery basics and need to know facts
Effects and animation
Event-handling mechanisms
Asynchronous request handling (AJAX)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
7. Goals of this session
You will learn about:
jQuery basics and need to know facts
Effects and animation
Event-handling mechanisms
Asynchronous request handling (AJAX)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
8. Goals of this session
You will learn about:
jQuery basics and need to know facts
Effects and animation
Event-handling mechanisms
Asynchronous request handling (AJAX)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 30
9. jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifies
HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is designed to
change the way that you write JavaScript.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
10. jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifies
HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is designed to
change the way that you write JavaScript.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
11. jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifies
HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is designed to
change the way that you write JavaScript.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
12. jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifies
HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is designed to
change the way that you write JavaScript.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
13. jQuery about itself
From the jQuery Website:
jQuery is a fast and concise JavaScript Library that simplifies
HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development. jQuery is designed to
change the way that you write JavaScript.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 30
14. Introduction to jQuery
Compact
only 56kb minified
19kb minified and gzipped
Cross-browser compatible
Internet Explorer 6.0+
Firefox 2+
Safari 3.0+
Opera 9.0+
Chrome
Easily extendable
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 30
15. Introduction to jQuery
Compact
only 56kb minified
19kb minified and gzipped
Cross-browser compatible
Internet Explorer 6.0+
Firefox 2+
Safari 3.0+
Opera 9.0+
Chrome
Easily extendable
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 30
16. Introduction to jQuery
Compact
only 56kb minified
19kb minified and gzipped
Cross-browser compatible
Internet Explorer 6.0+
Firefox 2+
Safari 3.0+
Opera 9.0+
Chrome
Easily extendable
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 30
17. jQuery Example
$ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
18. jQuery Example
$ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
19. jQuery Example
$ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
20. jQuery Example
$ ( ”p#e x a m p l e ” ) . a d d C l a s s ( ” h i g h l i g h t ” ) . f a d e I n ( ” s l o w ” ) ;
Find all paragraphs with the id example
Add the css class highlight to them
Fade in the paragraph slowly
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 30
21. What comes next?
Basics
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
22. DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r e a d y (
function () { . . . }
);
Get the document object extended with jQuery functionality
Register an event handler executed once the document is
loaded
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
23. DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r e a d y (
function () { . . . }
);
Get the document object extended with jQuery functionality
Register an event handler executed once the document is
loaded
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
24. DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r e a d y (
function () { . . . }
);
Get the document object extended with jQuery functionality
Register an event handler executed once the document is
loaded
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
25. DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r e a d y (
function () { . . . }
);
Get the document object extended with jQuery functionality
Register an event handler executed once the document is
loaded
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
26. DOM Object proxy
jQuery is accessed using $ or jQuery
Document centric
$(css selector).operation
$ ( document ) . r e a d y (
function () { . . . }
);
Get the document object extended with jQuery functionality
Register an event handler executed once the document is
loaded
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 30
27. Interoperability
Different Javascript libs use $ as a shortcut
jQuery allows to rename its $ shortcut
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 30
28. Interoperability
Different Javascript libs use $ as a shortcut
jQuery allows to rename its $ shortcut
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 30
29. Interoperability - Example
Include jQuery after other libraries
1 < s c r i p t s r c=” p r o t o t y p e . j s ”></ s c r i p t>
2 < s c r i p t s r c=” j Q u e r y . j s ”></ s c r i p t>
Use its noConflict function
1 var $j = jQuery . n o C o n f l i c t () ;
2
3 // Use j Q u e r y
4 $ j ( someElement ) . s o m e F u n c t i o n ( ) ;
5
6 // Use p r o t o t y p e
7 $ ( someElement ) . s o m e F u n c t i o n ( ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 9 / 30
30. Interoperability - Example
Include jQuery after other libraries
1 < s c r i p t s r c=” p r o t o t y p e . j s ”></ s c r i p t>
2 < s c r i p t s r c=” j Q u e r y . j s ”></ s c r i p t>
Use its noConflict function
1 var $j = jQuery . n o C o n f l i c t () ;
2
3 // Use j Q u e r y
4 $ j ( someElement ) . s o m e F u n c t i o n ( ) ;
5
6 // Use p r o t o t y p e
7 $ ( someElement ) . s o m e F u n c t i o n ( ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 9 / 30
31. Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )
2 . addClass ( ’ red ’ )
3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )
2 . parent ()
3 . addClass ( ’ neat ’ )
4 . parent ()
5 . addClass ( ’ fancy ’ )
6 . end ( )
7 . end ( )
8 . addClass ( ’ red ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
32. Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )
2 . addClass ( ’ red ’ )
3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )
2 . parent ()
3 . addClass ( ’ neat ’ )
4 . parent ()
5 . addClass ( ’ fancy ’ )
6 . end ( )
7 . end ( )
8 . addClass ( ’ red ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
33. Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )
2 . addClass ( ’ red ’ )
3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )
2 . parent ()
3 . addClass ( ’ neat ’ )
4 . parent ()
5 . addClass ( ’ fancy ’ )
6 . end ( )
7 . end ( )
8 . addClass ( ’ red ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
34. Fluent interface (Chaining)
Every method returns the object currently working on
1 $ ( ’ span ’ )
2 . addClass ( ’ red ’ )
3 . c s s ( ’ t e x t −w e i g h t ’ , ’ b o l d ’ ) ;
Element selections are tracked and can be restored
1 $ ( ’ span ’ )
2 . parent ()
3 . addClass ( ’ neat ’ )
4 . parent ()
5 . addClass ( ’ fancy ’ )
6 . end ( )
7 . end ( )
8 . addClass ( ’ red ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 30
35. CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )
Hierarchical
$( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ )
Filters
$( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ )
Many more
$ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
36. CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )
Hierarchical
$( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ )
Filters
$( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ )
Many more
$ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
37. CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )
Hierarchical
$( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ )
Filters
$( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ )
Many more
$ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
38. CSS 3 complaint selectors
Basic
$ ( ’#i d ’ ) , $ ( ’ . c l a s s ’ ) , $ ( ’ e l e m e n t ’ )
Hierarchical
$( ’ ancestor descendant ’ ) , $( ’ parent > c h i l d ’ )
Filters
$( ’p : f i r s t ’ ) , $( ’ div : v i s i b l e ’ ) , $( ’ ∗: header ’ )
Many more
$ ( ’ d i v : h a s ( img . t h u m b n a i l [ s r c $ =. png ] : n o t ( : h i d d e n ) ) ’ )
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 30
39. DOM Manipulation
1 Select the nodes to work with:
$( ’p > div ’ )
2 Use DOM manipulation functions on it
Insert nodes
Change content
Replace nodes
Remove nodes
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
40. DOM Manipulation
1 Select the nodes to work with:
$( ’p > div ’ )
2 Use DOM manipulation functions on it
Insert nodes
Change content
Replace nodes
Remove nodes
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
41. DOM Manipulation
1 Select the nodes to work with:
$( ’p > div ’ )
2 Use DOM manipulation functions on it
Insert nodes
Change content
Replace nodes
Remove nodes
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
42. DOM Manipulation
1 Select the nodes to work with:
$( ’p > div ’ )
2 Use DOM manipulation functions on it
Insert nodes
Change content
Replace nodes
Remove nodes
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 30
43. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
44. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
45. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
46. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
47. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
48. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
49. Insert nodes
Inside
. append ( c o n t e n t )
. prepend ( content )
Outside
. a f t e r ( content )
. before ( content )
Around
. wrap ( c o n t e n t )
. wrapAll ( content )
content may be a HTML snippet, a jQuery object or a DOM
node
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 30
50. Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . h t ml ( ’<b>f o o </b>b a r ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
51. Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . h t ml ( ’<b>f o o </b>b a r ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
52. Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . h t m l ( ’<b>f o o </b>b a r ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
53. Changing contents
Change simple text content
$ ( ’ p#i d ’ ) . t e x t ( ’ f o o b a r ’ ) ;
Change HTML content (innerHTML)
$ ( ’ p#i d ’ ) . h t m l ( ’<b>f o o </b>b a r ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 30
54. Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ;
Replace selected nodes with already existing nodes
$ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ;
Replaces all elements which match the selector div with the
contents of p#id
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
55. Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ;
Replace selected nodes with already existing nodes
$ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ;
Replaces all elements which match the selector div with the
contents of p#id
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
56. Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ;
Replace selected nodes with already existing nodes
$ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ;
Replaces all elements which match the selector div with the
contents of p#id
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
57. Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ;
Replace selected nodes with already existing nodes
$ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ;
Replaces all elements which match the selector div with the
contents of p#id
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
58. Replace nodes
Replace selected nodes with new nodes
$ ( ’ p#i d ’ ) . r e p l a c e W i t h ( ’<d i v >f o o b a r </d i v > ’ ) ;
Replace selected nodes with already existing nodes
$ ( ’ p#i d ’ ) . r e p l a c e A l l ( ’ d i v ’ ) ;
Replaces all elements which match the selector div with the
contents of p#id
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 30
59. Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
60. Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
61. Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
62. Remove nodes
Remove all child nodes
$ ( ’ p#i d ’ ) . empty ( ) ;
Remove the element itself
$ ( ’ p#i d ’ ) . remove ( ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 30
63. Iterators
Iterate over an arbitrary set of elements:
1 $ ( ’ p ’ ) . each (
2 function () {
3 $ ( t h i s ) . h tm l ( ’<b>Lorem ipsum . . . < / b> ’ ) ;
4 }
5 );
this is mapped to the currently iterated DOM element
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 30
64. Iterators
Iterate over an arbitrary set of elements:
1 $ ( ’ p ’ ) . each (
2 function () {
3 $ ( t h i s ) . h tm l ( ’<b>Lorem ipsum . . . < / b> ’ ) ;
4 }
5 );
this is mapped to the currently iterated DOM element
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 30
65. Iterators
Iterate over an arbitrary set of elements:
1 $ ( ’ p ’ ) . each (
2 function () {
3 $ ( t h i s ) . h tm l ( ’<b>Lorem ipsum . . . < / b> ’ ) ;
4 }
5 );
this is mapped to the currently iterated DOM element
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 30
66. What comes next?
Animation
http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
67. Predefined animations
jQuery comes with a number of predefined effects
Fade in and out elements
$ ( ’p ’ ) . fad eIn (1000) ;
$ ( ’ p ’ ) . fadeOut (500) ;
$ ( ’ p ’ ) . fadeTo ( 8 0 0 , 0 . 5 ) ;
Slide in and out
$ ( ’p ’ ) . s l i d e I n (1000) ;
$ ( ’p ’ ) . slideOut (500) ;
$ ( ’p ’ ) . s l i d e T o g g l e (800) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
68. Predefined animations
jQuery comes with a number of predefined effects
Fade in and out elements
$ ( ’p ’ ) . fad eIn (1000) ;
$ ( ’ p ’ ) . fadeOut (500) ;
$ ( ’ p ’ ) . fadeTo ( 8 0 0 , 0 . 5 ) ;
Slide in and out
$ ( ’p ’ ) . s l i d e I n (1000) ;
$ ( ’p ’ ) . slideOut (500) ;
$ ( ’p ’ ) . s l i d e T o g g l e (800) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
69. Predefined animations
jQuery comes with a number of predefined effects
Fade in and out elements
$ ( ’p ’ ) . fad eIn (1000) ;
$ ( ’ p ’ ) . fadeOut (500) ;
$ ( ’ p ’ ) . fadeTo ( 8 0 0 , 0 . 5 ) ;
Slide in and out
$ ( ’p ’ ) . s l i d e I n (1000) ;
$ ( ’p ’ ) . slideOut (500) ;
$ ( ’p ’ ) . s l i d e T o g g l e (800) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 30
70. Predefined animations
Show and hide elements by using a combination of fading and
sliding
$ ( ’ p ’ ) . show ( 1 0 0 0 ) ;
$ ( ’p ’ ) . hide (500) ;
$ ( ’p ’ ) . toggle (800) ;
Called without the duration time these three effects are
instantanious
All animation methods can be called with an optional callback
executed after the animation finished.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 30
71. Predefined animations
Show and hide elements by using a combination of fading and
sliding
$ ( ’ p ’ ) . show ( 1 0 0 0 ) ;
$ ( ’p ’ ) . hide (500) ;
$ ( ’p ’ ) . toggle (800) ;
Called without the duration time these three effects are
instantanious
All animation methods can be called with an optional callback
executed after the animation finished.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 30
72. Predefined animations
Show and hide elements by using a combination of fading and
sliding
$ ( ’ p ’ ) . show ( 1 0 0 0 ) ;
$ ( ’p ’ ) . hide (500) ;
$ ( ’p ’ ) . toggle (800) ;
Called without the duration time these three effects are
instantanious
All animation methods can be called with an optional callback
executed after the animation finished.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 30
73. Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative values
absolute values
1 $ ( ’ p ’ ) . animate (
2 { t o p : ’ 100 px ’ ,
3 h e i g h t : ’+=50px ’ ,
4 o p a c i t y : ’ −=0.5 ’
5 },
6 1000
7 );
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
74. Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative values
absolute values
1 $ ( ’ p ’ ) . animate (
2 { t o p : ’ 100 px ’ ,
3 h e i g h t : ’+=50px ’ ,
4 o p a c i t y : ’ −=0.5 ’
5 },
6 1000
7 );
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
75. Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative values
absolute values
1 $ ( ’ p ’ ) . animate (
2 { t o p : ’ 100 px ’ ,
3 h e i g h t : ’+=50px ’ ,
4 o p a c i t y : ’ −=0.5 ’
5 },
6 1000
7 );
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
76. Custom animations
Use the animate method for custom animations
Every numeric property can be animated
relative values
absolute values
1 $ ( ’ p ’ ) . animate (
2 { t o p : ’ 100 px ’ ,
3 h e i g h t : ’+=50px ’ ,
4 o p a c i t y : ’ −=0.5 ’
5 },
6 1000
7 );
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 30
77. A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounous
operation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
2 someAsyncCallWithCallback ( function () {
3 $ ( t h i s ) . dequeue ( ) ;
4 })
5 }) ;
6
7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
8 /∗ . . . ∗/
9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
78. A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounous
operation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
2 someAsyncCallWithCallback ( function () {
3 $ ( t h i s ) . dequeue ( ) ;
4 })
5 }) ;
6
7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
8 /∗ . . . ∗/
9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
79. A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounous
operation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
2 someAsyncCallWithCallback ( function () {
3 $ ( t h i s ) . dequeue ( ) ;
4 })
5 }) ;
6
7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
8 /∗ . . . ∗/
9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
80. A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounous
operation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
2 someAsyncCallWithCallback ( function () {
3 $ ( t h i s ) . dequeue ( ) ;
4 })
5 }) ;
6
7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
8 /∗ . . . ∗/
9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
81. A small detour: Using the queue
jQuery uses a queue to manage it’s animations internally
Can be used to synchronize any otherwise aynchrounous
operation
Queues are associated with DOM objects
1 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
2 someAsyncCallWithCallback ( function () {
3 $ ( t h i s ) . dequeue ( ) ;
4 })
5 }) ;
6
7 $ ( ’ p ’ ) . queue ( f u n c t i o n ( ) {
8 /∗ . . . ∗/
9 }) ;
Always used $(this).dequeue() to keep the queue running
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 30
82. What comes next?
Events
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
83. Event handling basics
Event abstraction to not rely on browser specific behaviour
Generic event binding/unbinding methods
Shortcut helper methods for different events
Live event binding (event delegation)
Event namespaces
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
84. Event handling basics
Event abstraction to not rely on browser specific behaviour
Generic event binding/unbinding methods
Shortcut helper methods for different events
Live event binding (event delegation)
Event namespaces
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
85. Event handling basics
Event abstraction to not rely on browser specific behaviour
Generic event binding/unbinding methods
Shortcut helper methods for different events
Live event binding (event delegation)
Event namespaces
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
86. Event handling basics
Event abstraction to not rely on browser specific behaviour
Generic event binding/unbinding methods
Shortcut helper methods for different events
Live event binding (event delegation)
Event namespaces
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
87. Event handling basics
Event abstraction to not rely on browser specific behaviour
Generic event binding/unbinding methods
Shortcut helper methods for different events
Live event binding (event delegation)
Event namespaces
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 30
88. Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ;
Register event handler for one time execution
$ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ;
Trigger an event and all of its event handlers
$( ’p ’ ) . trigger (” click ”) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
89. Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ;
Register event handler for one time execution
$ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ;
Trigger an event and all of its event handlers
$( ’p ’ ) . trigger (” click ”) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
90. Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ;
Register event handler for one time execution
$ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ;
Trigger an event and all of its event handlers
$( ’p ’ ) . trigger (” click ”) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
91. Generic event handling
Register an event handler for a specific element
$ ( ’ p ’ ) . bind ( ’ c l i c k ’ , f u n c t i o n ( e ) {}) ;
Remove a registered event handler
$ ( ’ p ’ ) . unbind ( ’ c l i c k ’ , [ f u n c t i o n ] ) ;
Register event handler for one time execution
$ ( ’ p ’ ) . one ( ” mousemove ” , f u n c t i o n ( e ) { } ) ;
Trigger an event and all of its event handlers
$( ’p ’ ) . trigger (” click ”) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 30
92. Event object abstraction
Event object always send to event handler
No need for window.event
Normalized according to W3C standard (jQuery.Event)
function handler ( event ) {
event . type ;
event . target ;
e v e n t . pageX ;
e v e n t . pageY ;
/∗ . . . ∗/
event . preventDefault () ;
event . stopPropagation () ;
/∗ . . . ∗/
}
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 30
93. Event object abstraction
Event object always send to event handler
No need for window.event
Normalized according to W3C standard (jQuery.Event)
function handler ( event ) {
event . type ;
event . target ;
e v e n t . pageX ;
e v e n t . pageY ;
/∗ . . . ∗/
event . preventDefault () ;
event . stopPropagation () ;
/∗ . . . ∗/
}
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 30
94. Event object abstraction
Event object always send to event handler
No need for window.event
Normalized according to W3C standard (jQuery.Event)
function handler ( event ) {
event . type ;
event . target ;
e v e n t . pageX ;
e v e n t . pageY ;
/∗ . . . ∗/
event . preventDefault () ;
event . stopPropagation () ;
/∗ . . . ∗/
}
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 30
95. Event helper
Helper methods for common tasks
Shortcut methods for all kinds of events
$ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ;
d b l c l i c k , keydown , keyup , mousedown ,
m o u s e e n t e r , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hover ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
96. Event helper
Helper methods for common tasks
Shortcut methods for all kinds of events
$ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ;
d b l c l i c k , keydown , keyup , mousedown ,
m o u s e e n t e r , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hover ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
97. Event helper
Helper methods for common tasks
Shortcut methods for all kinds of events
$ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ;
d b l c l i c k , keydown , keyup , mousedown ,
m o u s e e n t e r , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hover ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
98. Event helper
Helper methods for common tasks
Shortcut methods for all kinds of events
$ ( ’ p ’ ) . c l i c k ( f u n c t i o n ( ) { /∗ . . . ∗/ } ) ;
d b l c l i c k , keydown , keyup , mousedown ,
m o u s e e n t e r , mousemove , s c r o l l , . . .
Often needed functionality
$ ( ’ p ’ ) . hover ( over , out ) ;
$ ( ’ p ’ ) . t o g g l e ( fn , fn2 , fn3 , fn4 , ...) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 30
99. Live events
Bind event handlers to items which do not exist yet
$( ’p ’ ) . l i v e (” click ” , function (e) {
$ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ;
}) ;
Remove live event handlers again
$( ’p ’ ) . die (” click ”) ;
live and die are using event delegation, which enhances
performance with big element counts
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
100. Live events
Bind event handlers to items which do not exist yet
$( ’p ’ ) . l i v e (” click ” , function (e) {
$ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ;
}) ;
Remove live event handlers again
$( ’p ’ ) . die (” click ”) ;
live and die are using event delegation, which enhances
performance with big element counts
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
101. Live events
Bind event handlers to items which do not exist yet
$( ’p ’ ) . l i v e (” click ” , function (e) {
$ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ;
}) ;
Remove live event handlers again
$( ’p ’ ) . die (” click ”) ;
live and die are using event delegation, which enhances
performance with big element counts
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
102. Live events
Bind event handlers to items which do not exist yet
$( ’p ’ ) . l i v e (” click ” , function (e) {
$ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ;
}) ;
Remove live event handlers again
$( ’p ’ ) . die (” click ”) ;
live and die are using event delegation, which enhances
performance with big element counts
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
103. Live events
Bind event handlers to items which do not exist yet
$( ’p ’ ) . l i v e (” click ” , function (e) {
$ ( t h i s ) . c s s ( ’ b a c k g r o un d −c o l o r ’ , ’ r e d ’ ) ;
}) ;
Remove live event handlers again
$( ’p ’ ) . die (” click ”) ;
live and die are using event delegation, which enhances
performance with big element counts
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 30
104. Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {
/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
105. Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {
/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
106. Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {
/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
107. Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {
/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
108. Event namespaces
To safely unbind events you need their callback function
jQuery event namespaces solve this problem really elegant
$ ( ’ d i v ’ ) . b i n d ( ’ c l i c k . mynamespace ’ , f u n c t i o n ( e ) {
/∗ . . . ∗/
}) ;
Unbinding the click event:
$ ( ’ d i v ’ ) . u n b i n d ( ’ c l i c k . mynamespace ’ ) ;
Unbinding all events in a namespace:
$ ( ’ d i v ’ ) . u n b i n d ( ’ . mynamespace ’ ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 30
109. What comes next?
Ajax
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
110. Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” )
Fire a HTTP GET request:
$ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Fire a HTTP POST request:
$ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Load and execute a remote <script>:
$ . getScript (” somescript . js ” , [ callback ]) ;
Callback functions are only executed on success
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
111. Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” )
Fire a HTTP GET request:
$ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Fire a HTTP POST request:
$ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Load and execute a remote <script>:
$ . getScript (” somescript . js ” , [ callback ]) ;
Callback functions are only executed on success
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
112. Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” )
Fire a HTTP GET request:
$ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Fire a HTTP POST request:
$ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Load and execute a remote <script>:
$ . getScript (” somescript . js ” , [ callback ]) ;
Callback functions are only executed on success
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
113. Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” )
Fire a HTTP GET request:
$ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Fire a HTTP POST request:
$ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Load and execute a remote <script>:
$ . getScript (” somescript . js ” , [ callback ]) ;
Callback functions are only executed on success
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
114. Shortcuts for AJAX requests
Load external HTML directly:
$ ( ’ p#i d ’ ) . l o a d ( ” s o m e f i l e . ht m l #i d . c l a s s ” )
Fire a HTTP GET request:
$ . get ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Fire a HTTP POST request:
$ . post ( ” http : / / . . . ” , [ data ] , [ c a l l b a c k ] , [ type ] ) ;
Load and execute a remote <script>:
$ . getScript (” somescript . js ” , [ callback ]) ;
Callback functions are only executed on success
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 30
115. Advanced AJAX requests
Manual complex AJAX requests are possible
1 $ . a j a x ({
2 u r l : /∗ R e q u e s t u r l ∗/ ,
3 beforeSend : f u n c t i o n ( xhr ) {} ,
4 complete : f u n c t i o n ( xhr ) {} ,
5 s u c c e s s : f u n c t i o n ( code ) {} ,
6 e r r o r : f u n c t i o n ( xhr , s t a t u s , e r r o r ) { } ,
7 ...
8 }) ;
Other possible options are: async, cache, contentType, data,
dataFilter, dataType, global, ifModified, jsonp, password,
processData, scriptCharset, type, username, xhr
http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 30
116. Advanced AJAX requests
Manual complex AJAX requests are possible
1 $ . a j a x ({
2 u r l : /∗ R e q u e s t u r l ∗/ ,
3 beforeSend : f u n c t i o n ( xhr ) {} ,
4 complete : f u n c t i o n ( xhr ) {} ,
5 s u c c e s s : f u n c t i o n ( code ) {} ,
6 e r r o r : f u n c t i o n ( xhr , s t a t u s , e r r o r ) { } ,
7 ...
8 }) ;
Other possible options are: async, cache, contentType, data,
dataFilter, dataType, global, ifModified, jsonp, password,
processData, scriptCharset, type, username, xhr
http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 30
117. Advanced AJAX requests
Manual complex AJAX requests are possible
1 $ . a j a x ({
2 u r l : /∗ R e q u e s t u r l ∗/ ,
3 beforeSend : f u n c t i o n ( xhr ) {} ,
4 complete : f u n c t i o n ( xhr ) {} ,
5 s u c c e s s : f u n c t i o n ( code ) {} ,
6 e r r o r : f u n c t i o n ( xhr , s t a t u s , e r r o r ) { } ,
7 ...
8 }) ;
Other possible options are: async, cache, contentType, data,
dataFilter, dataType, global, ifModified, jsonp, password,
processData, scriptCharset, type, username, xhr
http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 30
118. Thanks for listening
Questions, comments or annotations?
Slides: http://slideshare.net
Contact:
Jakob Westhoff <jakob@php.net>
http://westhoffswelt.de
@jakobwesthoff
Bastian Feder <php@bastian-feder.de
http://bastian-feder.de
@lapistano
http://westhoffswelt.de jakob@westhoffswelt.de slide: 30 / 30