Seaside & jQuery UI：可排序列表不起作用？

Question

初学者在这里。 我目前正在尝试学习 Seaside，以及如何将 jQuery 与其集成。 我一直在尝试在我自己的图像中实现 Seaside jQuery UI 功能测试套件中提供的一些示例。

出于某种原因，我无法让可排序的列表起作用。 我复制并粘贴了示例中的代码，但它不起作用。 我确保添加了 jQuery 库，并测试了它是否适用于可点击的动画标题。 但是我的可排序列表只是在没有交互的情况下呈现。

检查页面源确实会显示一条错误消息：“TypeError：undefined is not a function(...)”，但我不明白这是什么意思？

任何帮助将不胜感激。 我想掌握这一点，并且需要了解它为什么不起作用。 请参阅下面的代码，完全从他们的示例中复制，除了将列表分配给 items 变量：

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

并包括在浏览器中呈现的 jQuery 代码：

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

您是否还添加了 jQueryUI 库？ 我认为在 jQuery 上找不到“可排序”...所以它可能没有加载。

Answer 2

有几点需要说明。

1. sortable （ JQSortable类）带有 jQuery UI，所以首先确保在你的 Seaside 应用程序中包含 jQuery UI 库（例如JQUiDevelopmentLibrary ）。

2. items变量是一个方法临时变量，因此它将始终按该顺序包含新项目。 它应该是一个实例变量（但我猜你这样做是为了这个 Stack Overflow 示例的目的）。

3. ajax function 中的this object 不再引用列表元素。 我在<ul>标签 ( id: 'list' ) 中添加了一个 id，并且我从传递给onStop:处理程序的 JS object 中引用了这样的 jQuery object。

通过这些更改，我可以使它工作。

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