时间戳

首页 > 解决方案 > 在海边用 Ajax 替换图像

ajax - 在海边用 Ajax 替换图像

问题描述

我已经在 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 ]

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

我要提前感谢您，祝您有美好的一天。

标签： ajaxasynchronouswebsmalltalkseaside

解决方案

我的第一个建议是放弃 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 的 imageButton 'case' , row asString , col asString）替换为什么的指令由replaceWith:渲染块渲染..

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

推荐阅读