Seaside & jQuery UI: Sortable list not working?

Question

Beginner here. I'm currently trying to learn Seaside, and how to integrate jQuery with it. I've been trying to implement some of the examples provided in the Seaside jQuery UI Functional Test Suite in my own image.

For some reason, I can't get a sortable list to work. I copy & pasted the code from the example but it doesn't work. I have made sure to add the jQuery library, and have tested that it works with a clickable animated heading. But my sortable list just gets rendered with no interaction.

Inspecting the page source does reveal an error message: "TypeError: undefined is not a function(...)", but I don't understand what this means?

Any help would be greatly appreciated. I want to get the hang of this and need to understand why it's not working. See my code below, as copied exactly from their example, with the exception of assigning a list to the items variable:

| items |
    items := OrderedCollection newFrom: {'peas' . 'carrots' . 'beetroot'}.
   html unorderedList
      script: (html jQuery new sortable
         onStop: (html jQuery ajax
            callback: [ :values | items := values ]
            passengers: (html jQuery this find: 'li')));
      with: [
         items do: [ :each |
            html listItem
               class: 'ui-corner-all';
               passenger: each;
               with: each ] ]

And including the jQuery code as rendered in the browser:

function onLoad() {
        $("#id3").sortable({              <-- TypeError occurs here
            "stop": function() {
                $.ajax({
                    "url": "/jquery",
                    "data": ["_s=To5SuUU8YuW_HSjD", "_k=MpvlOw_BWjmgF9Uy", "1", "2=" + encodeURIComponent($.map($(this).find("li").get(), function(each) {
                        return each.id
                    }).join(","))].join("&")

Answer 1

Did you also add the jQueryUI library? I would think the 'sortable' is not found on a jQuery... so it probably is not loaded.

Answer 2

There are a few things to remark.

1. sortable (JQSortable class) comes with jQuery UI, so first be sure to include the jQuery UI library in your Seaside application (e.g. JQUiDevelopmentLibrary).

2. The items variable is a method temporary variable, so it will always have new items in that order. It should be an instance variable (but I guess you did it so for the purpose of this Stack Overflow example).

3. The this object in the ajax function doesn't refer to the list element anymore. I added an id to the <ul> tag (id: 'list') and I'm referencing such jQuery object from within the JS object passed to the onStop: handler.

With these changes I could make it work.

renderContentOn: html
    items := items
        ifNil: [ OrderedCollection newFrom: {'peas' . 'carrots' . 'beetroot'} ].
    html unorderedList
        id: 'list';
        script:
            (html jQuery new sortable
                onStop:
                    (html jQuery ajax
                        callback: [ :values | items := values ]
                        passengers: ((html jQuery id: 'list') find: 'li')));
        with: [ items
                do: [ :each | 
                    html listItem
                        class: 'ui-corner-all';
                        passenger: each;
                        with: each ] ]