ajax - 用 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 永远不会改变。

目标只是当我点击 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: 处理程序中，您可以在其中传递一个 JQuery Ajax 对象，该对象在服务器上执行回调，然后返回一个脚本 (JS)，其内容包含替换元素的指令具有特定 id(具有 id 'case' 、 row asString 、 col asString 的 imageButton )，由 replaceWith: 渲染 block 呈现。

您甚至可以更进一步，将 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) ]) ])].