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 库？我认为 'sortable' 在 jQuery 上找不到...所以它可能没有加载。

Answer 2

有几点需要说明。

sortable (JQSortable class) 自带 jQuery UI, 所以首先一定要包含 jQuery UI Seaside 应用程序中的库（例如 JQUiDevelopmentLibrary）。
items 变量是一个方法临时变量，因此它将始终按该顺序包含新项。它应该是一个实例变量（但我猜你这样做是为了这个 Stack Overflow 示例）。
ajax 函数中的 this 对象不再引用列表元素。我在 <ul> 标签 (id: 'list') 中添加了一个 id，我从传递给 onStop: 处理程序的 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 ] ]

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

Seaside & jQuery UI: Sortable list not working?

javascript

jquery

jquery-ui

seaside

pharo