[Catalyst] Catalyst + Ajax

[Denis]

May be this help
http://www.dev411.com/wiki/AJAX_Select_Chaining_with_Catalyst

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

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

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

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

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

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

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

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

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

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

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

CW> Chisel

CW> PS: There's a typo in the POD for HTML::Prototype:
CW>   print $ptototype->update_element_function(...);
CW> It should be prototype not ptototype