在海边用 Ajax 替换图像

Question

I have been working on Seaside 3.1 for a couple of days and I'm trying to design a simple TicTacToe with Ajax.

It works great without ajax with this code:

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 ] ]

and with ajax it doesn't work at all, though the page doesn't refresh as expected. The imageButton never changes for a simple image with another url.

The goal is just to swap the imageButton for an image with another url when I click on it.

Here's where I am with my code:

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 ]

I am new and not very good with this technology, therefore I am ready to hear any answer, advice or guidance.

I would like to thank you in advance, have a good day.

Answer 1

My first suggestion would be to drop Scriptaculous and use JQuery instead, the former isn't developed anymore while JQuery is maintained daily and is supported by Seaside as well.

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 ]

The key is in the onClick: handler, where you pass a JQuery Ajax object that executes a callback on the server and then returns a script (JS) whose content have the instructions to replace an element with certain id (an imageButton with id 'case' , row asString , col asString ) by what is rendered by the replaceWith: render block..

You can even go a little further and merge both the callback: and script: into a single call as follows:

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) ]) ])].