Ajax & EE/CI: the Hi road & the Low road

Ajax & ExpressionEngine || CodeIgniter The Hi road & the Low road EECI2009, October 23rd, Leiden, The Netherlands

Hi! I’m Low! Lodewijk Schutte @low

http://www.ﬂickr.com/photos/jmspool/163305616/

AJAX = Asynchronous JavaScript and XML

Ajax = refreshing part of the web page

It’s everywhere!

!"#$%&'()*"+",-%./0123"45.2&67895.2&:0;07<)=>$3?#.@'3!A"= !"#$%&'()895.2&:0;0)#3@-2.-B()23"45.2&60$.,:$%&'<C #%&0D%@#'"2,&C)=>$3?#.@'3!A"= !"#$%&'()4&2&0&:/$/E.4(F)#3@-2.-B()%&0D%@#-3@'.%867G%& #93D#,D%&E7<C)=H&2&0&#0$.,#.0&8!A"=

http://www.ﬂickr.com/photos/mn_francis/418496408/

Use Progressive Enhancement - Make sure your site works without the fancy stu - Use unobtrusive JavaScript to make it better - Use the back-end for heavy lifting - Keep it accessible

Hijax Plan Ajax from the start, implement Ajax at the end

http://www.ﬂickr.com/photos/andrewandsarah/185203822/

Taking the Hi(jax) road - Identify design elements that imply the use of Ajax - How will it work without JavaScript? - How will it a ect the back-end code? - And always ask yourself...

What are you doing? - Add, don’t take away - Use the correct methods: GET vs. POST - EE peeps: know what EE is doing or expecting - Keep It Simple...

Example #1: Toggle Stock

Toggle Stock, the plan - Show form to logged in user - Create script to update entry - Use Ajax for quick responsiveness - Update stock indicator on screen

I&;/1?&J23K1&@0%.&,#?&J23K()?.@&,)L #!4.+#-2",,().0&8)= ##!0"J2&= ###::: ####!0%= #####!0$#,-3/&()%3?)=>03-B!A0$= #####!04#-2",,(),03-B)=M@#,03-B!A04= ####!A0%= ::: ##!A0"J2&= ##I.'#23KK&4N.@L ###!'3%8#-2",,()03KK2&,03-B)#"-0.3@()I/"0$("*";A03KK2&,03-BL)#8&0$34()/3,0)= ####!'.&24,&0= #####!.@/D0#09/&()$.44&@)#@"8&()&@0%9N.4)#+"2D&()I&@0%9N.4L)#A= #####!JD003@#09/&(),DJ8.0)=O3KK2&#,03-B!AJD003@= ####!A'.&24,&0= ###!A'3%8= ##IA.'L #!A4.+= IA&;/1?&J23K1&@0%.&,L

Using a library? Try this: PN>QRSQRT7UOOVNWNRQXYQ>OQHNZMOU7[#((#7W]U00/R&^D&,07 Available in jQuery, MooTools, Prototype, Dojo...

Example #2: Quick Search

Quick Search, the plan - Hijack existing search form - Get results in JSON format - Generate HTML from result set - Catch errors

I # )%&,D20,)1#T#I&;/1,&"%-$1,&"%-$N%&,D20,L # # I # # # )D%2)# 1#)ID%2N0.02&N/"0$(?.@&,AJ3002&L)_ # # # )0.02&)# 1#)I0.02&L) # # LI.'#-3D@0#`(#030"2N%&,D20,L_IA.'L # # IA&;/1,&"%-$1,&"%-$N%&,D20,L # [_ # # )D%2)# # # # 1#)I/"0$(?.@&,A,&"%-$AI,&K8&@0NaLL)_ # )B&9?3%4,)## # 1#)I&;/1,&"%-$1B&9?3%4,L)_ # )030"2N%&,D20,)# 1#)I&;/1,&"%-$1030"2N%&,D20,L) L

I # )%&,D20,)#1#T[ L

Example #3: Contact Form

Contact Form, the plan - Hijack existing mailto: links - Get contact form from server - Display form as modal window (lightbox) - Send form using Ajax

# .@.0#1#'D@-0.3@6<#I # # AA#b%&"0&#-3@0".@&%#4.+#'3%#2.K$0J3; # # 0$.,:-3@0".@&%#(#@&?#Q2&8&@0674.+7_I # # # 7.47# 1#72.K$0J3;7_ # # # 723"47# 1#I # # # # 3@>D--&,,1#0$.,:23"4&4:J.@460$.,<_ # # # # 3@5".2D%&1#0$.,:'".2&4:J.@460$.,< # # # L # # L<C # # AA#b%&"0&#0%"@,/"%&@0#3+&%2"9#'3%#2.K$0J3; # # 0$.,:3+&%2"9#(#@&?#Q2&8&@0674.+7_I # # # 7.47# 1#73+&%2"97_ # # # 7,092&,71#I73/"-.0971c:FL_ # # # 7&+&@0,71#I7-2.-B710$.,:-23,&:J.@460$.,<L # # L<C # # AA#G44#&+&@0#03#2.@B, # # PP67d/%.8"%9#"7<:&"-$6'D@-0.3@6"<I # # # .'#6":$%&'#((#78".20317e0$.,:&8".2<#I # # # # ":"44Q+&@067-2.-B7_0$.,:3/&@:J.@4Z.0$Q+&@060$.,<<C # # # L # # L_0$.,<C # L_

# 3/&@#1#'D@-0.3@6&+&@0<#I # # # # AA#b"@-&2#&+&@0 # # &+&@0:/%&+&@0H&'"D206<C # # AA#"44#4"0"#-3@0".@&%#"@4#3+&%2"9 # # 0$.,:-3@0".@&%:.@*&-0643-D8&@0:J349<C # # 0$.,:3+&%2"9:.@*&-0643-D8&@0:J349<C # # AA#/2"-&#-3@0".@&%#Fc/;#J&23?#J%3?,&%#-$%38& # # 0$.,:-3@0".@&%:,&0>092&6703/7_#Fc#e#?.@43?:K&0>-%3226<:9<C # # AA#"44#23"4.@K#8&,,"K&#03#-3@0".@&% # # 0$.,:-3@0".@&%:,&067$0827_#7!/#.4()23"4.@K)=]3"4.@K!A/=7<C # # AA#]3"4#D%2#.@03#4"0"#-3@0".@&% # # 0$.,:-3@0".@&%:23"460$.,:D%2<C # L_

23"4&4#1#'D@-0.3@6<#I # AA#4&'.@&#+"%."J2&, # +"%#'3%8_#-23,&C # # AA#f&0#-3@0"-0#'3%8_#"44#3@,DJ8.0#&+&@0#03#.0 # .'#6'3%8#(#PP67d-3@0"-0'3%8#'3%87<Tc[<#I # # # # P67@"8&7<:'3-D,6<C # # # AA#G44#,D--&,,A'".2D%&#&+&@0,#03#'3%8 # # '3%8:,&067,&@47_#I # # # 3@>D--&,,10$.,:,&@4>D--&,,:J.@460$.,<_ # # # 3@5".2D%&10$.,:,&@45".2D%&:J.@460$.,< # # L<C # # # # '3%8:"44Q+&@067,DJ8.07_#'D@-0.3@6<I # # # AA#g3D#-3D24#/&%'3%8#83%&#-$&-B,#$&%& # # # '3%8:,&@46<C # # # %&0D%@#'"2,&C # # L<C # # L # AA#b$&-B#.'#-23,&?.@43?#&;.,0,:#M'#@30_#-%&"0&#.0 # .'#6#`#6-23,&#(#P67-23,&?.@43?7<<<#I

# # # 3@>D--&,,10$.,:,&@4>D--&,,:J.@460$.,<_ # # # 3@5".2D%&10$.,:,&@45".2D%&:J.@460$.,< # # L<C # # # # '3%8:"44Q+&@067,DJ8.07_#'D@-0.3@6<I # # # AA#g3D#-3D24#/&%'3%8#83%&#-$&-B,#$&%& # # # '3%8:,&@46<C # # # %&0D%@#'"2,&C # # L<C # # L # AA#b$&-B#.'#-23,&?.@43?#&;.,0,:#M'#@30_#-%&"0&#.0 # .'#6#`#6-23,&#(#P67-23,&?.@43?7<<<#I # # AA#-%&"0&#-23,&?.@43?#&2&8&@0_#"44#.0#03#'3%8 # # -23,&#(#@&?#Q2&8&@067JD003@7_#I # # # .417-23,&?.@43?7_ # # # 0&;017b"@-&27 # # L<:.@*&-060$.,:-3@0".@&%:K&0Q2&8&@067'.&24,&07<<C # L # AA#"44#&+&@0#03#d-23,&?.@43?## # -23,&:"44Q+&@067-2.-B7_#0$.,:-23,&:J.@460$.,<<C L_

# '".2&4#1#'D@-0.3@6<#I # # 0$.,:-3@0".@&%:,&067$0827_#75GM]`7<C # L_ # ,&@4>D--&,,#1#'D@-0.3@6<#I # # P67-3@0"-0'3%87<:,&067$0827_#7!/=UDhh"$`#O$&#'3%8#?",#,&@0`!A/=7<C # # ,&0O.8&3D060$.,:-23,&:J.@460$.,<_#ijFc<C# # # L_ # ,&@45".2D%&#1#'D@-0.3@6<#I # # P67-3@0"-0'3%87<:,&067$0827_#7!/=5GM]`#O%9#"K".@#2"0&%:!A/=7<C # # ,&0O.8&3D060$.,:-23,&:J.@460$.,<_#ijFc<C # L_ # -23,&#1#'D@-0.3@6<#I # # AA#4.,/3,&#&2&8&@0,#,3#?&#-"@#%&kD,&#2"0&% # # 0$.,:-3@0".@&%:4.,/3,&6<C # # 0$.,:3+&%2"9:4.,/3,&6<C # # %&0D%@#'"2,&C # L

Questions?

http://www.ﬂickr.com/photos/goopymart/291244864/

http://www.eeci2009.com	3683
http://eeci2009.com	1925
http://www.slideshare.net	10
http://translate.googleusercontent.com	5
http://web.archive.org	5
http://saty	1
http://prakash25	1
http://webcache.googleusercontent.com	1
http://www.republiclabs.com	1
http://eeci2010.com	1
http://awsomnick25may4	1

Ajax & EE/CI: the Hi road & the Low road

by Lodewijk Schutte on Oct 25, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 5,634

Statistics

Ajax & EE/CI: the Hi road & the Low road — Presentation Transcript