AJAX

From Dev411: The Code Wiki

AJAX development is a breeze using the Prototype.js library and a server-side library such as Perl's HTML::Prototype.

Examples

Example Linked Select Lists

The following is an example to change the value of a select list based on the AJAX results of another using the Catalyst web framework and Template Toolkit templating system.

TT2 Template:

<div id="selectA_result" style="display:none"></div>

<select id="selectA">
<option value="0">[ Select A ]</option>
<option value="1">A1</option>
<option value="2">A2</option>
</select>

<select id="selectB">
<option>[ Select B ]</option>
<option>B1</option>
<option>B2</option>
</select>

[% c.prototype.observe_field('selectA',{
  url      => '/ajax/doAction',
  with     => "'action='+document.getElementById('selectA').value",
  update   => 'selectA_result',
  complete => "document.getElementById('selectB').selectedIndex
    = document.getElementById('selectA_result').innerHTML"
}) %]

Catalyst Controller:

sub doAction : Local {
  my ($self,$c) = @_;
  $c->res->output($c->request->param('action'));
}

Further Reading / External Links

• Prototype JavaScript Framework (http://prototype.conio.net/)
• Script.aculo.us Prototype Extensions (http://script.aculo.us/)
• Using prototype.js v1.3.1 (http://www.sergiopereira.com/articles/prototype.js.html)
• Edit-in-Place with Ajax (http://24ways.org/advent/edit-in-place-with-ajax)
• Activity indicator (http://mir.aculo.us/articles/2005/11/14/ajax-activity-indicators-with-rails-0-14-3)