[Catalyst] Catalyst + Ajax

[Chisel Wright]

Since Ajax keeps cropping up on the list, I thought I'd make a start on
a "Ajax with Catalyst" demo app.

I've had a peek at Catacaculous, which seems to have started, but not
gone very far.

I was wondering if anyone out there had examples of Ajax usage in
Catalyst that I could beg, borrow and steal from.

I've had very little trouble with:
 - autocomplete
 - dragging elements around
 - observing a field (a la MiniMojo)
 - some effects (reload, fade, appear)
 - updating div contents from a submit button click

I've been able to create a sortable list. The docs suggest that a call
to 'url' is made when the list order is changed.
I'm not seeing any calls made back to the server at all using:
---- cut here ----
<ul id="sort_me">
    <li id="3">3 DRAG ME!</li>
    <li id="5">5 DRAG ME!</li>
    <li id="1">1 DRAG ME!</li>
    <li id="2">2 DRAG ME!</li>
    <li id="4">4 DRAG ME!</li>
</ul>
[% url = base _ 'sortable/sort' %]
[% c.prototype.sortable_element( 'sort_me', { url => url } ) %]
---- cut here ----

The other one that's got me stumped at the moment is doing something
useful when a dragged element is dropped somewhere.

I've got the draggable portion working, and I'm seeing a Catalyst called
when the element is released in my dropzone.  I just have no idea how to
return anything from the action that has an effect. I've tried
$c->res->output($prototype->update_element_function(..)) without any
luck,

---- cut here ----
<img src="static/images/btn_120x50_powered.png" width="120" height="50"
id="product_1" class="product" />
[% c.prototype.draggable_element('product_1', {revert => 'true'}) %]

<img src="static/images/btn_120x50_powered.png" width="120" height="50"
id="product_2" class="product" />
[% c.prototype.draggable_element('product_2', {revert => 'true'}) %]

<div class="dropbox" id="cart">
  <span style="vertical-align: bottom;">Drop an image here</style>
</div>
[% drop_url = base _ 'dragdrop/dropped' %]
[% c.prototype.drop_receiving_element (
    'cart',
    {
        accept     => 'product',
        url        => drop_url,
        hoverclass => 'dropbox_active',
    }
  )
%]
<p>&nbsp;</p>
<div id="status"></div>
---- cut here ----

Where is everyone looking to deduce the relevant incantations? The POD
for HTML::Prototype is useful to a degree, but I'm suffering for lack of
working examples. Ideally, I'd like to be able to produce something
that's a useful resource for others starting out with Catalyst+Ajax -
save us answering the same basic questions over and over....

Chisel

PS: There's a typo in the POD for HTML::Prototype:
  print $ptototype->update_element_function(...);
It should be prototype not ptototype
-- 
Chisel Wright
e: chisel at herlpacker.co.uk
w: http://www.herlpacker.co.uk/

No virus was found in this outgoing message as I didn't bother looking.