Javascript Seaside&jQuery UI:可排序列表不工作？

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

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

检查页面源代码确实会显示一条错误消息：TypeError:undefined不是一个函数…，但我不明白这意味着什么

任何帮助都将不胜感激。我想掌握这个窍门，并且需要理解为什么它不起作用。请参见下面的我的代码，这完全是从他们的示例中复制的，但将列表分配给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("&")

---

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

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

有几点需要注意

可排序的JQSortable类附带jqueryui，因此首先确保在Seaside应用程序中包括jqueryui库，例如JQUiDevelopmentLibrary

items变量是一个方法临时变量，因此它将始终按该顺序包含新项。它应该是一个实例变量，但我想您这样做是为了这个堆栈溢出示例

ajax函数中的this对象不再引用列表元素。我在标记id中添加了一个id:'list'，并从传递给onStop:handler的JS对象中引用了这样的jQuery对象

有了这些改变，我可以让它工作

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

---

有几件事值得注意

可排序的JQSortable类附带jqueryui，因此首先确保在Seaside应用程序中包括jqueryui库，例如JQUiDevelopmentLibrary

items变量是一个方法临时变量，因此它将始终按该顺序包含新项。它应该是一个实例变量，但我想您这样做是为了这个堆栈溢出示例

ajax函数中的this对象不再引用列表元素。我在标记id中添加了一个id:'list'，并从传递给onStop:handler的JS对象中引用了这样的jQuery对象

有了这些改变，我可以让它工作

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

---

非常感谢你。我没有意识到jQuery UI不是jQuery库的一部分。对不起，这个愚蠢的问题！现在很好用，非常感谢。我没有意识到jQuery UI不是jQuery库的一部分。对不起，这个愚蠢的问题！现在很好用，谢谢。知道列表应该是一个实例变量而不是一个临时变量是很有用的，这很有意义。就像我说的，这里还是初学者。再次感谢！我有一个后续问题。。。在其他应用程序中使用sortable函数时，在重新排列列表项后，在保存或刷新页面时，列表项是否会被清除？如何防止这种情况发生？这些项是OrderedCollection对象，因此它将取决于您如何存储/检索此类集合。在您的原始示例中，集合是在每次呈现组件时创建的，在我的示例中，集合及其顺序将在组件的生命周期内保留，但在同一组件的不同实例之间以及在不同用户会话中会有所不同。这与其说是海边的问题，不如说是一个坚持的问题。谢谢。知道列表应该是一个实例变量而不是一个临时变量是很有用的，这很有意义。就像我说的，这里还是初学者。再次感谢！我有一个后续问题。。。在其他应用程序中使用sortable函数时，在重新排列列表项后，在保存或刷新页面时，列表项是否会被清除？如何防止这种情况发生？这些项是OrderedCollection对象，因此它将取决于您如何存储/检索此类集合。在您的原始示例中，集合是在每次呈现组件时创建的，在我的示例中，集合及其顺序将在组件的生命周期内保留，但在同一组件的不同实例之间以及在不同用户会话中会有所不同。这与其说是一个海滨问题，不如说是一个持久性问题。