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

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

basilmir 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?

So the Seaside callback processing code doesn't know that a javascript array should be converted into an OrderedCollection for your use?  

If it were me I'd just add and #asOrderedCollection in your callback block

e.g.

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 asOrderedCollection]
                                                            passengers: (html jQuery this find: 'li'));
                                                            axis: 'y');
                                   with: [self renderItemsOn: html].
                       
                       (html submitButton)
                                callback: [self add];
                                text: 'Add'].
html render: editor



and handle it

or better yet


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 setModelItemsFrom: items]
                                                            passengers: (html jQuery this find: 'li'));
                                                            axis: 'y');
                                   with: [self renderItemsOn: html].
                       
                       (html submitButton)
                                callback: [self add];
                                text: 'Add'].
html render: editor

then define #setModelItems: to do just what I needed.  By defining a method in your callback block to set the inst vars value you get to edit the action of the callback without refreshing/redrawing the component.  

Perfect! The below works as advertised.



Pe 26 feb. 2015, la 01:29, Paul DeBruicker <[hidden email]> a scris:

> callback:
> [:items | self model items: items asOrderedCollection]
_______________________________________________
seaside-dev mailing list
[hidden email]
http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev