Replace an image with Ajax on seaside - 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) ]) ])].