Scriptaculous - Sortable

Hi all,

I have just started playing with Scriptaculous a bit, and so far it is
going ok. I used the SUSortableTest as a basis to work from and created
my own example (inheriting from SUComponent) with a single list. I can
drag and drop items in the list, but I can just not figure out why my
triggerSortable:callback: doesn't seem to be called. I put a halt in the
callback block, and it definetly never gets there. Is there maybe some
trick or something I need to use that I might have missed.

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 ]
             ]
        ]

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

Kind regards,

Mart-Mari

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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:[hidden email]]
Sent: 24 Mei 2006 10:35
To: The Squeak Enterprise Aubergines Server - general discussion.
Subject: Re: [Seaside] Scriptaculous - Sortable

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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

2006/5/24, Mart-Mari Breedt <[hidden email]>:
> Has that problem been solved yet, or is that still the case?
Unfortunately this is still true.

Cheers
Philippe
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

That is a real pity. Do you care to explain what the problem is?

Kind regards,
Mart-Mari

-----Original Message-----
From: Philippe Marschall [mailto:[hidden email]]
Sent: 24 Mei 2006 10:58
To: The Squeak Enterprise Aubergines Server - general discussion.
Subject: Re: [Seaside] Scriptaculous - Sortable

2006/5/24, Mart-Mari Breedt <[hidden email]>:
> Has that problem been solved yet, or is that still the case?
Unfortunately this is still true.

Cheers
Philippe
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> That is a real pity. Do you care to explain what the problem is?

Ask google, this is something that has been discussed a lot in the
blog world. It has nothing to do with Seaside or Smalltalk, it is
rather a problem with different JavaScript libraries that change
prototypes in incompatible manners and/or have conflicting
implementations ...

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

O, ok. I will check it out. I tought there was maybe something I could
help with, but it doesn't sound like it.

I tried the sortable table row tags, but it seems like the wiki was
right... it can indeed not be applied to these kind of tags. (I should
have probadly believed the wiki from the start). Does anyone maybe know
of a workaround for this?

-----Original Message-----
From: Lukas Renggli [mailto:[hidden email]]
Sent: 24 Mei 2006 03:29 nm
To: The Squeak Enterprise Aubergines Server - general discussion.
Subject: Re: [Seaside] Scriptaculous - Sortable

> That is a real pity. Do you care to explain what the problem is?

Ask google, this is something that has been discussed a lot in the
blog world. It has nothing to do with Seaside or Smalltalk, it is
rather a problem with different JavaScript libraries that change
prototypes in incompatible manners and/or have conflicting
implementations ...

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

> I tried the sortable table row tags, but it seems like the wiki was
> right... it can indeed not be applied to these kind of tags. (I should
> have probadly believed the wiki from the start). Does anyone maybe know
> of a workaround for this?

Yes, use the DIV tag and a style-sheet to model the table, this works
fine with sortables ;-)

<div class="table">
  <div class="row">
    <div class="cell">foo</div>
    <div class="cell">bar</div>
    <div class="cell">zork</div>
  </div>
  ...
</div>

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

2006/5/24, Mart-Mari Breedt <[hidden email]>:
> That is a real pity. Do you care to explain what the problem is?

Basically PlotKit (the JavaScript part) misuses Arrays. This doesn't
show up as long as Prototpye is not present:
http://groups.google.com/group/plotkit/browse_thread/thread/6a347862071a75be/#
http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/

A solution would be to rewrite all for-loops in PlotKit.

Cheers
Philippe
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside