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它根本不起作用，尽管页面没有按预期刷新。对于使用其他网址的简单图像，imageButton永远不会更改。

目标只是在我点击图像时将图像与另一个图片交换为图像。

以下是我的代码所在：

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:渲染块呈现的内容。

您甚至可以进一步将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替换图像

1 个答案: