在海边用 Ajax 替换图像答案

【问题标题】：Replace an image with Ajax on seaside在海边用 Ajax 替换图像
【发布时间】：2018-04-28 12:21:59
【问题描述】：

我已经在 Seaside 3.1 上工作了几天，我正在尝试使用 Ajax 设计一个简单的井字游戏。

在没有 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 ]

我是新手，不太擅长这项技术，因此我愿意听取任何答案、建议或指导。

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

【问题讨论】：

如果你想要 tictactoe 项目的完整代码，你可以在这里找到它：pastebin.com/xaJbmxKK Morpion 是 Tictactoe 的法语单词（：

标签： ajax asynchronous web smalltalk seaside

【解决方案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 的元素的指令（一个 imageButton id 'case' , row asString , col asString) 由 replaceWith: 渲染块渲染的内容..

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

【讨论】：