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!