[Seaside] Scriptaculous - Sortable

[Mart-Mari Breedt]

Thanks, it was the indeed #passenger: that was missing. I am going to
try the table rows in a momemnt. Just one more question, I am aware that
there is some problems with Scriptaculous and Plotkit not being
compatible. Has that problem been solved yet, or is that still the case?

Kind regards,
Mart-Mari

-----Original Message-----
From: Lukas Renggli [mailto:renggli at gmail.com] 
Sent: 24 Mei 2006 10:35
To: The Squeak Enterprise Aubergines Server - general discussion.
Subject: Re: [Seaside] Scriptaculous - Sortable

> 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
_______________________________________________
Seaside mailing list
Seaside at lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside