在海邊用 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 '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) ]) ])].