coldfusion and jquerycfunited.com/2009/files/presentations/229_preso_jquery.pdfajax load get post...
TRANSCRIPT
![Page 1: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/1.jpg)
www.cfunited.com
ColdFusion and jQuery
Raymond [email protected]
blog: www.coldfusionjedi.comtwitter: cfjedimaster
Wednesday, August 12, 2009
![Page 2: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/2.jpg)
JavaScript is NOT the Enemy
Wednesday, August 12, 2009
![Page 3: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/3.jpg)
You can find peace
Wednesday, August 12, 2009
![Page 4: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/4.jpg)
Powerful
Wide support
It works for me (after an initial period of grumpy old man whining)
Why jQuery?
Wednesday, August 12, 2009
![Page 5: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/5.jpg)
History & Tidbits
Created by John Resig in January 2006
Currently version 1.3.2
Site, mailing lists, books, extensions
Used by some very large sites (big people, big people)
Wednesday, August 12, 2009
![Page 6: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/6.jpg)
History & Tidbits (2)
Compatability: Firefox 2.0, IE 6+, Safari 3+, Opera 9+, Chrome 1+
Free (duh)
Download minified, compressed, or full fat.
Available via Google CDN
Wednesday, August 12, 2009
![Page 7: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/7.jpg)
So what does it do?
Finds stuff
Changes stuff
Loads stuff
(And more stuff)
Wednesday, August 12, 2009
![Page 8: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/8.jpg)
Signs you may be working with
$ is jQuery
Lots and lots and lots of stuff chained together: $(something).doSomething().doSomethingElse().doSomethingMore().doSomethingAgain().heyWhyNotDoitAgain().areWeThereYet()
Wednesday, August 12, 2009
![Page 9: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/9.jpg)
Quick Demo
Wednesday, August 12, 2009
![Page 10: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/10.jpg)
Selectors (Finding stuff)
Follows CSS rules
With a few extras...
$( this is where you do it )
Wednesday, August 12, 2009
![Page 11: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/11.jpg)
Selector Examples
$("#SOMEID")
$(".SOMECLASS")
$("TAG")
Wednesday, August 12, 2009
![Page 12: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/12.jpg)
Demo
/ex2/test1.html
Wednesday, August 12, 2009
![Page 13: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/13.jpg)
Selector Examples (2)
Immediate kids: $("#parent > p")
All kids: $("#parent p")
Wednesday, August 12, 2009
![Page 14: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/14.jpg)
Demo
/ex2/test2.html
Wednesday, August 12, 2009
![Page 15: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/15.jpg)
Selector Examples (3)
Not! $("something:not(somethingelse)")
With Something: $("img[alt]")
Wednesday, August 12, 2009
![Page 16: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/16.jpg)
Demo
/ex2/test3.html
Wednesday, August 12, 2009
![Page 17: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/17.jpg)
Selectors Gone Wild
Match values at the beginning: ^
Match values at the end: $
Match values anywhere: *
Wednesday, August 12, 2009
![Page 18: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/18.jpg)
Demo
/ex2/test4.html
Wednesday, August 12, 2009
![Page 19: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/19.jpg)
Custom Selectors
:even, :odd
:eq (numeric, ie, the Nth one)
:nth-child('even|odd|#')
Wednesday, August 12, 2009
![Page 20: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/20.jpg)
Demo
/ex/test5.html
Wednesday, August 12, 2009
![Page 21: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/21.jpg)
Selectors - More...
contains
form related (checked, selected, en/disabled)
next, prev, parent, children, siblings
filter
Wednesday, August 12, 2009
![Page 22: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/22.jpg)
Demo
/ex2/test6.html
Wednesday, August 12, 2009
![Page 23: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/23.jpg)
Manipulation
Adding, removing classes
Setting, getting attributes
Prepending, appending
Changing contents
Wednesday, August 12, 2009
![Page 24: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/24.jpg)
Demo
/ex3/*
Wednesday, August 12, 2009
![Page 25: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/25.jpg)
Events
What you expect (click, change, etc)
Special ones: hover, toggle
$(document).ready
Wednesday, August 12, 2009
![Page 26: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/26.jpg)
Demo
/ex4/*
Wednesday, August 12, 2009
![Page 27: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/27.jpg)
"effects pisstick me off"
Wednesday, August 12, 2009
![Page 28: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/28.jpg)
Hiding/Showing
Fading
Slide up/down
List of changes
Effects Support
Wednesday, August 12, 2009
![Page 29: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/29.jpg)
Demo
http://docs.jquery.com/Effects
Wednesday, August 12, 2009
![Page 30: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/30.jpg)
Ajax
load
get
post
getJSON
getScript
Wednesday, August 12, 2009
![Page 31: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/31.jpg)
Demo
/ex5 (hey Ray, don't show test5.cfm yet)
Wednesday, August 12, 2009
![Page 32: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/32.jpg)
Plugins
Approx 2,400
Wide range of areas: UI, Forms, Widgets, Etc
Quality also covers a wide range
Wednesday, August 12, 2009
![Page 33: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/33.jpg)
My FavoritesValidate
http://plugins.jquery.com/project/validate
Thickbox
http://jquery.com/demo/thickbox/
jqGrid
http://www.trirand.com/blog/
jQuery Select
http://www.texotela.co.uk/code/jquery/select/
Wednesday, August 12, 2009
![Page 34: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/34.jpg)
jQuery+ColdFusion
Wednesday, August 12, 2009
![Page 35: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/35.jpg)
CF: Helpful Things
Still the Glue
Native JSON support
returnFormat
XML generation (by hand, but still easy)
Wednesday, August 12, 2009
![Page 36: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/36.jpg)
CF: Not-So Helpful Things
onRequest (EVIL++) (Fixed in ColdFusion 9!)
Whitespace
Debugging
Wednesday, August 12, 2009
![Page 37: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/37.jpg)
Demo
/ex5/test5.cfm
Wednesday, August 12, 2009
![Page 38: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/38.jpg)
Where next?
Listserv: http://groups.google.com/group/jquery-en
Books: Many, but I recommend: Learning jQuery 1.3
Wednesday, August 12, 2009
![Page 39: ColdFusion and jQuerycfunited.com/2009/files/presentations/229_preso_jquery.pdfAjax load get post getJSON getScript Wednesday, August 12, 2009 Demo /ex5 (hey Ray, don't show test5.cfm](https://reader036.vdocuments.net/reader036/viewer/2022070906/5f780bb1e276c04dfd711262/html5/thumbnails/39.jpg)
Any Questions?
My email: [email protected]
My blog: www.coldfusionjedi.com
My other blog: www.insideria.com
Wednesday, August 12, 2009