[Seaside] How to Save a sorted list in Scriptaculous

Lukas Renggli renggli at gmail.com
Tue Aug 28 21:57:17 UTC 2007


I just added to the Scriptaculous package a new example SUSortableTest
(the old one is renamed to SUSortableDoubleTest).

Name: Scriptaculous-lr.216
Author: lr
Time: 28 August 2007, 11:55:19 pm
UUID: 74f452a8-083b-4155-bf82-aa83ff8ace0d
Ancestors: Scriptaculous-lr.215

- added a trivial example of sortable lists

The code is as simple as:

initialize
	super initialize.
	collection := #( 'San Salvatore' 'Monte Bre' 'Calvagione' )

renderContentOn: html
	| id |
	html unorderedList
		id: (id := html nextId);
		script: (html sortable
			onUpdate: (html request
				triggerSortable: id
				callback: [ :value | collection := value ]));
		with: [ self renderListItemsOn: html ]

renderListItemsOn: html
	collection do: [ :each |
		html listItem
			passenger: each;
			with: each ]

On 8/28/07, Rajeev Lochan <lochan94 at gmail.com> wrote:
> Hi,
>
> I had tried to imitate what you(Lukas) had posted on
>
> http://www.lukas-renggli.ch/smalltalk/seaside/web20.txt
>
> I also changed the renderItemOn: code after crosschecking from your site to
>
> html div
>                         passenger: anItem;
>                         with: [
>                              html render: anItem title]
>
>
> Still I am not able to figure out the solution.
>
> Regards,
>
> Rajeev
>
>
> On 8/29/07, Rajeev Lochan <lochan94 at gmail.com> wrote:
> > Hi Lukas,
> >
> > As suggested by you, I made the following changes.
> >
> > ListView>> renderContentOn:html
> > html form: [
> > html render: self model title.
> > html div class: 'items';
> >                 script: (html sortable tag: 'div';
> >
> >                     onUpdate: (html request
> >                     triggerSortable: 'items'
> >                     callback: [:col | self model items: col]));
> >                 with: [
> >                     self model items do: [:eachItem| self
> renderItemOn:eachItem].
> > html submitButton callback: [self answer: self model]; text:'Update'
> >
> >
> > ListView>> renderItemOn: html
> >
> > html div id: 'myListEditItems';
> >                         passenger: anItem;
> >                         with: [
> >                             html render: anItem title]
> >
> > When I try to update it, its not being done. The self halt introduced
> earlier in
> >
> > onUpdate: (html request
> >                     triggerSortable: 'items'
> >                     callback: [:col |self halt. self model items: col]));
> >
> > is also not stopped for debugging.
> >
> > I Followed through the SUSortableTest to catch up a few hints. But that
> seemed to be very complex compared to the situation we have here.
> >
> > I also tried html div class: 'myListEditItems'; But no progress either.
> >
> > Where i am i falling down ??
> >
> > Rajeev
> >
> >
> >
> >
> >
> >
> >
> >
> >
> > On 8/29/07, Rajeev Lochan <lochan94 at gmail.com> wrote:
> > > Thanks Lukas,
> > > I shall incorporate changes and come back
> > >
> > >
> > >
> > >
> > >
> > > On 8/29/07, Lukas Renggli < renggli at gmail.com > wrote:
> > > > There are many different problems with your approach:
> > > >
> > > > > ListView>> renderContentOn: html
> > > > > html form: [
> > > > > html render: self model title.
> > > > > html div class: 'items';
> > > > >                  script: (html sortable tag: 'div';
> > > > >                     onUpdate: (html request
> > > > >                     triggerSortable: 'items'
> > > > >                     callback: [:col | self model items: col]));
> > > >
> > > > If you say the sortable should use 'div' tags, then all elements
> > > > inside your container should be of that kind. Check out the method
> > > > comment of #tag:
> > > >
> > > > >                 with: [
> > > > >                     self model items do: [:eachItem| self
> > > > > renderItemOn:eachItem].
> > > > >                      html submitButton callback: [self answer: self
> model]]]
> > > >
> > > > Uhh, the button should be outside the container.
> > > >
> > > > > ListView>> renderItemOn: anItem
> > > > > html
> > > > >         table: [html
> > > > >                 tableRow: [html tableData id: 'checkBoxItem';
> > > > >
> > > > >                         with: [html checkbox value: anItem done;
> > > > >
> > > > >                                 callback: [:value |
> anItem done: value]].
> > > > >                     html tableData id: 'myListEditItems';
> > > > >                         passenger: anItem;
> > > > >                         with: [
> > > > >                             html render: anItem title]]]
> > > >
> > > > The sortable elements should be DIV-tags, if you declare them to be
> > > > DIVs. Tables in general don't work together with drag&drop, so avoid
> > > > them altogether (see documentation of script.aculo.us).
> > > >
> > > > Furthermore you need to assign the #passenger: to the direct child of
> > > > the container (the DIV). Again see the documentation of
> > > > script.aculo.us.
> > > >
> > > > > The page is rendered and the items can be sorted. The sorting is
> only done
> > > > > on the client end. If I submit the button, the new order of the
> items isn't
> > > > > updated. Am I missing anything ?
> > > >
> > > > That's because you tell Scriptaculous to only consider div-tags, but
> > > > you add table-tags as children.
> > > >
> > > > Have a look at SUSortableTest for a working example.
> > > >
> > > > HTH,
> > > > 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
>
> > > >
> > >
> > >
> > >
> > >
> > > --
> > > Rajeev Lochan
> > >
> > > Co-founder, AR-CAD.com
> > >
> > > http://www.ar-cad.com
> > > +91 9243468076 (Bangalore)
> > > 080 65355873
> >
> >
> >
> > --
> > Rajeev Lochan
> >
> > Co-founder, AR-CAD.com
> >
> > http://www.ar-cad.com
> > +91 9243468076 (Bangalore)
> > 080 65355873
>
>
>
> --
> Rajeev Lochan
>
> Co-founder, AR-CAD.com
>
> http://www.ar-cad.com
> +91 9243468076 (Bangalore)
> 080 65355873
> _______________________________________________
> Seaside mailing list
> Seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


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


More information about the seaside mailing list