AJAX lifecycle transition

[Mikkel WF]

I'm trying to make a page with transitions not based on buttons, but
on moving an element from one ul-list to another.

I've made the functionality of moving an element between lists with
jQuery like this:

jQuery(document).ready(function() {
jQuery("#manager").sortable({
connectWith: ['#volunteer', '#manager'],
receive: function(event, ui) {
}
});
jQuery("#volunteer").sortable({
connectWith: ['#manager', '#available']
});
jQuery("#available").sortable({
connectWith: ['#volunteer', '#manager']
});
});

the receive function should hold the ajax call to the database, but
i'm not really sure what to put there. is there a pure JS-way to
update the transition..?

[Bryan Larsen]

http://cookbook.hobocentral.net/manual/ajax#submitting_an_ajax_form_via_javascript
should have what you need. If you have more questions, just ask.

Bryan

[Mikkel WF]

I can see that the Hobo.ajaxRequest should have a URL to invoke
(obviously :))..

I my case i have 3 transistions with these generated routes PUT:
/event_attendees/:id/available
/event_attendees/:id/volunteer
/event_attendees/:id/manage

The list item itself that gets moved (and triggers the receive
function) hasn't got any id, so i'm looking for at nice way of
implementing that, so its easy for the js to pull it out (sorry for
the noob approach, but i haven't really worked with js before).

On 5 Feb., 15:04, Bryan Larsen <bryan.lar...@gmail.com> wrote:
> http://cookbook.hobocentral.net/manual/ajax#submitting_an_ajax_form_v...

[Matt Jones]

On Feb 5, 2010, at 9:51 AM, Mikkel WF wrote:

> I can see that the Hobo.ajaxRequest should have a URL to invoke
> (obviously :))..
>
> I my case i have 3 transistions with these generated routes PUT:
> /event_attendees/:id/available
> /event_attendees/:id/volunteer
> /event_attendees/:id/manage
>
> The list item itself that gets moved (and triggers the receive
> function) hasn't got any id, so i'm looking for at nice way of
> implementing that, so its easy for the js to pull it out (sorry for
> the noob approach, but i haven't really worked with js before).
>

All you'll need is some way to get the corresponding ID out of the
draggable objects - maybe a hidden field? I've also (ab)used the rel=
attribute to handle this - you can grab it with
jQuery(object).attr('rel').

--Matt Jones

[Mikkel WF]

So, i finally got it working.

I've added the id to the li-tag "<li id="24">..</li>", and use this
receive function:

receive: function(event, ui) {
Hobo.ajaxRequest('/event_attendees/'+ui.item.attr('id')+'/manage',
['#list-available', '#list-volunteers', '#list-managers'], { method:
"PUT" });
}

Also had to clear a bunch of other errors in my various files before
it worked properly..

AJAX is so sweet when it works..!

THX GUYS..!

[Bryan Larsen]

My standard trick is to set an ID on the element that contains the id
and then use a regex to pull it out:

<div id="attendee-#{this_field}">

var id=parseInt(object.id.replace("attendee-", ""));

Bryan

[kevinpfromnm]

Couldn't you also use the human readable id style "#-name" and have
ruby handle grabbing the number out of it?