Rails spinoffs - Mar 2007 - What's the trick to getting dynamic draggable lists working?

I''m having a difficult time getting a dynamic list (resulting from
user input on an observed field) to be draggable.

I read that when you have multiplle draggable/sortable lists, all the
Ajax controller code must be together at the end of the file[1].  But
even doing this doesn''t make my dynamic list draggable.

Can anyone give me an example of making dynamic draggable lists?

Thank you in advance,
Jose


[1] http://wiki.script.aculo.us/scriptaculous/page/print/SortableListsDemo


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hey Jose,

HG a écrit :
> I read that when you have multiplle draggable/sortable lists, all the
> Ajax controller code must be together at the end of the file[1].  But
> even doing this doesn''t make my dynamic list draggable.
The thing is, the current implementation of Sortable (as I''m assuming
when you say you want your list to be draggable, you mean reorderable
through dragging) only takes care of elements *within the list at
creation time* (when you do a Sortable.create over it).

This might change in the future, particularly when Prototype 1.6
releases with support for custom events.  But for now, the only
guaranteed way (that I know of) is to destroy+recreate a Sortable over
your list anytime it changes.

There are three ways to make your list "dynamic" and persistent
through
AJAX:

(a) Add the list item on the client side, and fire up an Ajax.Request to
the server side, so it mirrors the update in the persistence layer.

(b) Fire up an Ajax.Updater, insertion-based to the server side, which
persists the change and returns the XHTML fragment for the new item,
which is then inserted in the existing list as per the insertion option.

(c) Fire up an Ajax.Updater to the server side, which persists the
change and returns the XHTML fragment for the whole list, which is then
updated as a block.

In all three cases, you need to prepare for the change by destroying the
current Sortable, then follow up on the XHTML fragment''s DOM being
updated by creating a fresh Sortable.  In the (b) option, that would be
something like this:

funciton updateList(itemText) {
  Sortable.destroy(''listId''); // Doesn''t matter if
there''s none yet
  new Ajax.Updater(''listId'', ''/item/create'',
{
    parameters: { text: itemText },
    insertion: Insertion.Bottom,
    onComplete: function() {
      Sortable.create(''listId'');
      // Nice little effect to help with accessibility...
      new
Effect.Highlight($(''listId'').immediateDescendants().last());
    }
  });
}

''HTH

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---