Drupal 7 Advanced AJAX Tips and Tricks, presentation by Earl Miles at BADcamp2010

Slides and code:
http://www.angrydonuts.com/drupal-7-advanced-ajax-tips-and-tricks

Drupal 7 combined the existing system with one Earl wrote for CTools.

Not covering form today (#ajax). Earl doesn't like

How you build an AJAX request and what that means.

How do you respond to an AJAX request: server-side, PHP code. 'delivery callback'

the command array is a macro language that works on the client side
correlates directly to jquery commands

ajax_command_html('#aajax_example', $data);

This is the list of commands in core.

http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax_commands/7

You can extend this!

You can even just

True, "you can do everything on the server side, you
More importantly, you can eliminate the cut and paste code. For advanced stuff, you still will be writing code.

Learning a little bit of JQuery is highly recommended.

a behavior is when anything changes a page, it calls drupal attach behaviors and goes through all behaviors and runs them

Drupal behaviors is the greatest gift to Drupal javascript ever.

Element Settings

default is 'mousedown' but really 'click' should always be used.

The selector only matters if you're using a selector method.

Can use drupal_add_js with a little settings array, can be easier to write into a set of code.

In JavaScript, functions are data.

We copied the success function, then modified it.

ajax.old_success = ajax.success

// Now replace with our own:
ajax.success = ...

Custom AJAX Command

Javascript side:
$(function() {
Drupal.ajax.prototype.commands.aajax_custom_response = function (ajax, response, status) {

$output = array(
all commands are in this namespace, like how behaviors work.

ajax object is copied a lot so you have to use the prototype to make sure it is always there

Chx: anytime you see a piece

Earl: You can't do it generically. It's very hard to change a single piece of text on a node; node save doesn't work that way.

Things that aren't clicks

Timer. (JavaScript event thing running in the background. element_settings.event = 'AJAXExampleCustomEvent')

Played with new facebook or twitter UI? You can do anything there with this.
Is important to make sure you have very quick AJAX requestss. But you aren't running theme_page (which is shockingly slow) with each call [which helps a lot].