Seaside jQuery - Sorting a list with drag and drop and sending it back via Ajax causes OrderedCollection to turn into an Array?

Hi

To see a working example of this, take a look at StoryBoard

Download the 30 image from https://ci.inria.fr/pharo-contribution/job/StoryBoard/
Start it, open the seaside control panel and start a ZnZincServerAdaptor on port
8080. Open a web browser on http://localhost:8080/story, register yourself,
add a project and start adding stories. They can be dragged and dropped.

The actual code is in the rendering methods of SBProjectStoryColumn

Stephan

Hi

I assume that your _itemList variable is set via self model items: items.

If so then it looks like it will become an array due to the callback:passengers: sent to JQAjax: 

(html jQuery ajax 

callback: [:items | self model items: items]
        passengers: (html jQuery this find: 'li')

The implementation:

callback: aBlock passengers: aQuery

"Trigger the callback aBlock with the passengers of aQuery. Nodes that have no passenger are ignored."

self

callback: [ :value | 

aBlock value: (((value subStrings: ',')

collect: [ :each | self renderContext callbacks passengerAt: each ])

reject: [ :each | each isNil ]) ]

value: (JSStream on: JQuery functionName , '.map(' , aQuery greaseString , '.get(),function(each){return each.id}).join(",")')

uses (value subStrings: ',') which will return an array.

You could modify your setter accessor items: to modify the collection using asOrderedCollection if you need this...?

Kind Regards

Carlo

On 13 Feb 2015, at 11:26 AM, Mircea S. <[hidden email]> wrote:

The code below is form the Seaside book at: http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-and-drop

ToDoListView>>renderContentOn: html

self renderHeadingOn: html.
     html form: [(html unorderedList)
                                    id: (listId := html nextId);
                                    script: ((html jQuery new sortable)
                                                            onStop: (html jQuery ajax
                                                            callback: [:items | self model items: items]
                                                            passengers: (html jQuery this find: 'li'));
                                                            axis: 'y');
                                   with: [self renderItemsOn: html].
                       
                       (html submitButton)
                                callback: [self add];
                                text: 'Add'].
html render: editor

My instance variable _itemList is initially OrderedCollection. As soon as I move the rows around in the page then entire list is sent back in it's new order. However, this time setItemList: receives an Array.

Does this make any sense? Am I missing something?

Thank you for pointing me in the right direction, the source I was using is the Seaside book at: http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-and-drop

I was using a heavily modified version of that example to figure out how it works. The code on that page is the culprit.

Q: A long time ago I remember one could post errata on the bottom page of that Seaside book. This seems to be no longer possible. IS IT POSSIBLE TO EDIT THE SEASIDE BOOK? I've redone all the examples and discovered a lot of improvements, I've written them down so I could edit the book, I've done it before about two years ago when I was doing the examples in the first part, never got this far before.



Pe 13 feb. 2015, la 13:27, Stephan Eggermont <[hidden email]> a scris:

On Fri, Feb 27, 2015 at 8:46 AM, Mircea S. <[hidden email]> wrote:
> Thank you for pointing me in the right direction, the source I was using is the Seaside book at: http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-and-drop
>
> I was using a heavily modified version of that example to figure out how it works. The code on that page is the culprit.
>
> Q: A long time ago I remember one could post errata on the bottom page of that Seaside book. This seems to be no longer possible. IS IT POSSIBLE TO EDIT THE SEASIDE BOOK? I've redone all the examples and discovered a lot of improvements, I've written them down so I could edit the book, I've done it before about two years ago when I was doing the examples in the first part, never got this far before.

Yes, that would be awesome to have!

Phil

On Fri, Feb 27, 2015 at 8:46 AM, Mircea S. <[hidden email]> wrote:
> Thank you for pointing me in the right direction, the source I was using is the Seaside book at: http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-and-drop
>
> I was using a heavily modified version of that example to figure out how it works. The code on that page is the culprit.
>
> Q: A long time ago I remember one could post errata on the bottom page of that Seaside book. This seems to be no longer possible. IS IT POSSIBLE TO EDIT THE SEASIDE BOOK? I've redone all the examples and discovered a lot of improvements, I've written them down so I could edit the book, I've done it before about two years ago when I was doing the examples in the first part, never got this far before.


You can contribute here:
https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeaside


--
Serge Stinckwich
UCBN & UMI UMMISCO 209 (IRD/UPMC)
Every DSL ends up being Smalltalk
http://www.doesnotunderstand.org/