Download - Drupal & AJAX. Drupalcamp Finland 2010
Presented by David Corbacho Roman,
Drupal Specialist at Drupro
May 28, 2009
Drupal & AJAXThe New Way
AJAXAsynchronous Javascript and XML
Let’s talk about
• AJAX an approach that involves HTML/XHTML, CSS, DOM, the
XMLHttpRequest object, JSON and Javascript glueing all these
together.
• jQuery’s higher level abstraction of AJAX.
• Contrib module CTools, and the new D7 AJAX Framework in core
that affects also to the Form API (FAPI), replacing the Drupal 6’s
AHAH.
Why did I enter in this session?
AJAX evolution
Why Ctools?
Demo!
Before AJAX
Google beta apps
• Gmail• Google Suggest• Google Maps
Websites behaving like
desktop applications,
thanks to the
XMLHTTPRequest
Object.
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
Jesse James Garrett gives a name to
this combination of tecnologies.
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
Drupal 6 released!
Includes jQuery for the first time.
Nathan Haug – quicksketch – developes AHAH
features
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
CTools (Chaos Tools Suite) #26by Earl Miles – merlinofchaos
Low-level tools for developers Multi-step forms Plugins Exportables
…
One of them is AJAX responderbut unknown,
undocumented ignored
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
CTools’ AJAX Framework
gets into Drupal 7 core!
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
Forms Links
Drupal 7 #ajax AJAX Framework
Drupal 6 #ahahCTool’s
AJAX Framework
6 years of AJAX 2004 - 2005 - 2006 – 2007 – 2008 - 2009 – 2010
AJAX “old way”
Output a link witha CSS id/class
Bind the link.
Make Ajax call
Loading..
Callback function that returns JSON/HTML
Manage received data.
Manipulate the DOM
Handle AJAX errors
Drupal.behaviors
PHP Side JS Side
AJAX “new way”
Output a link with.ctools-use-ajax(.use-ajax in D7)
Bind the link.
Make Ajax call
Loading..
Use macro commandslike:
ctools_ajax_command_appendajax_command_append (in D7)
PHP Side JS Side
Manage received data.
Manipulate the DOM
Handle AJAX errors
Drupal.behaviors
Why use the “new way”?• Adventages of being part of Drupal core
• Standarized way of doing Ajax – D7 ~ D6– Graceful degradation.– Identifying ajax links.
• Less code to write/maintain
• Let Ajax Framework takes care of – Loading…– All the javascript.– Drupal.behaviors()– Errors display– Warm Cache*
Let’s demo
<div class="item-list"> <ul> <li class="first“> <a href="/dbox/drupro_demo_example/nojs/"
class="ctools-use-ajax">Show Image</a> </li> <li class="last"> <a href="/dbox/drupro_demo_remove/nojs/"
class="ctools-use-ajax“>Remove Image</a> </li>
</ul></div>
<div id="drupro-demo-area“> </div>
URL /drupro_demo_example/nojs
function drupro_demo_example_ajax_response($js) { $output = '<img src=“/sites/all/modules/drupro_demo/drupro.png“ />';
if ($js == 'ajax') {
ctools_include('ajax'); $commands = array(); $commands[] = ctools_ajax_command_html('#drupro-demo-area', $output); ctools_ajax_render($commands);
} else { // no javascript
return $output;
}}
ctools_ajax_command_html
replace prepend appendafterbefore remove changedcss attrsettings redirect reload submit
More on www.drupro.comRoger Sanchez material about Ctools Modal
http://zroger.com/node/30
http://zroger.com/node/31
SF 2010 Ajax / CTools
http://sf2010.drupal.org/conference/sessions/ajax-and-javascript-drupal7-developers
http://www.archive.org/search.php?query=drupalcon%20sf%20ajax
http://sf2010.drupal.org/conference/sessions/leveraging-chaos-tool-suite-module-development
http://www.chapterthree.com/blog/josh_koenig/ajaxmodal_functionality_0_lines_javascript_200_m
ore_chaos_magic
CTools Paris 2009 by merlinofchaos
http://www.archive.org/details/LearntousetheCToolssuite
http://www.angrydonuts.com/ctools-presentation-slides-and-example-code
Module Examples
http://drupal.org/project/examples
Thank you for your time!