[Seaside] Scriptaculous - Sortable

[Lukas Renggli]

> My selector for rendering my list (menu) looks like this:
>
> renderMenuOn: html
>
>     html unorderedList
>         id: 'mainMenu';
>         style: 'width: 200px; min-height: 50px;';
>         script: (html sortable
>             constraint: false;
>             dropOnEmpty: true;
>             containment: #( mainMenu );
>             onUpdate: (html ajax
>                 id: 'mainMenu';
>                 triggerSortable: 'mainMenu'
>                     callback: [ :values | self menuItems: values ];
>                 callback: [ :renderer | ]
>             )
>         );
>         with: [
>             (self menuItems) do: [ :each |
>                  html listItem: [ self renderMenuItem: each on: html ]
>              ]
>         ]

The example in SUSortableTest is using two lists to drag and drop,
therefor it is a bit complicated. To track down the problem you should
remove unnecessary pieces of code. Possible problems could be:

* Are you sure that this id is unique on the resulting page? Giving
the same id/name to multiple elements on a page, gives very strange
(browser dependent) errors:

>         id: 'mainMenu';

* You can remove those, they are only needed if you have multiple lists:

>             constraint: false;
>             dropOnEmpty: true;
>             containment: #( mainMenu );

* The following code is a bit strange, it will remove the list (you
don't render anything) when the event is triggered. In the latest
version of scriptaculous there is SURequest (a subclass of SUAjax)
that does not update anything and can be used just for callbacks.
Sortable lists are redraw on the browser using JavaScript, you don't
need to update them manually.

>             onUpdate: (html ajax
>                 id: 'mainMenu';
>                 triggerSortable: 'mainMenu'
>                     callback: [ :values | self menuItems: values ];
>                 callback: [ :renderer | ]

* Ahh, now I see the real bug: you did not specify a passenger for the
list-items. If you don't specify passengers Seaside does not know what
values to provide in the sortable callback. Instead of

> html listItem: [ self renderMenuItem: each on: html ]

use something like:

    html listItem
       passenger: each;
       with: [ self renderMenuItem: each on: html ]

> Can the sortable example work on a table with table rows as well?

Yes, you can basically use any kind of tag as container and element,
see the method #tag:. As far as I recall there are however some
problems with tables, because certain browser treat table DOM elements
different than other elements. Check out the script.aculo.us wiki.

Lukas

-- 
Lukas Renggli
http://www.lukas-renggli.ch