在海边用 Ajax 替换图片

Question

我已经在 Seaside 3.1 上工作了几天，我正在尝试用 Ajax.

设计一个简单的 TicTacToe

在没有 ajax 的情况下使用此代码效果很好：

renderContentOn: html
html heading: 'Tictactoe'.
html
    form: [ 
        1 to: 3 do: [ :row | 
            1 to: 3 do: [ :col | 
                html imageButton
                    url: (tictactoe imageCase: row * 10 + col);
                    callback: [ tictactoe playsX: row playsY: col ] ].
            html break ] ]

和 ajax 它根本不起作用，尽管页面没有按预期刷新。对于带有另一个 url.

的简单图像，imageButton 永远不会改变

目标只是在我单击图像按钮时将图像按钮与另一个图像按钮交换 url。

这是我的代码所在的位置：

renderContentOn: html
html heading: 'Tictactoe'.
1 to: 3 do: [ :row | 
    1 to: 3 do: [ :col | 
        html imageButton
            url: (tictactoe imageCase: row * 10 + col);
            id: 'case' , row asString , col asString;
            onClick:
                    (html scriptaculous updater
                            id: 'case' , row asString , col asString;
                            callback: [ :r | 
                                        tictactoe playsX: row playsY: col.
                                        r render: (html image url: (tictactoe imageCase: row * 10 + col)) ];
                            return: false) ].
    html break ]

我是新手，对这项技术不是很好，因此我愿意听到任何答案、建议或指导。

提前谢谢你，祝你有美好的一天。

Answer 1

我的第一个建议是放弃 Scriptaculous 并使用 JQuery，前者不再开发，而 JQuery 每天维护并且也由 Seaside 支持。

renderContentOn: html
    html heading: 'Tictactoe'.
    1 to: 3 do: [ :row | 
        1 to: 3 do: [ :col | 
            html imageButton
                id: 'case' , row asString , col asString;
                url: (tictactoe imageCase: row * 10 + col);
                onClick:
                    (html jQuery ajax
                        callback: [ tictactoe playsX: row playsY: col ];
                        script: [ :s | 
                            s
                                <<
                                    ((html jQuery id: 'case' , row asString , col asString)
                                        replaceWith: [ :h | 
                                            h image url: (tictactoe imageCase: row * 10 + col) ]) ])].
        html break ]

关键在onClick:处理程序中，你传递一个JQueryAjax对象在服务器上执行回调然后returns一个脚本（JS ) 其内容包含用 replaceWith: 渲染块渲染的内容替换具有特定 id 的元素（具有 id 'case' , row asString , col asString 的图像按钮）的说明..

您甚至可以更进一步，将 callback: 和 script: 合并为一个调用，如下所示：

onClick:
    (html jQuery ajax
        script: [ :s | 
            tictactoe playsX: row playsY: col.
            s << ((html jQuery id: 'case' , row asString , col asString)
                     replaceWith: [ :h | 
                         h image url: (tictactoe imageCase: row * 10 + col) ]) ])].

在海边用 Ajax 替换图片

Replace an image with Ajax on seaside

ajax

asynchronous

web

smalltalk

seaside