Заменить изображение с Ajax на побережье - PullRequest
Новая
       15

Заменить изображение с Ajax на побережье

0 голосов
/ 28 апреля 2018

Я работаю над Seaside 3.1 в течение нескольких дней и пытаюсь создать простое TicTacToe с 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 он вообще не работает, хотя страница не обновляется должным образом. Кнопка image никогда не изменяется для простого изображения с другим URL.

Цель состоит в том, чтобы просто поменять 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 ]

Я новичок и не очень хорош в этой технологии, поэтому я готов выслушать любой ответ, совет или указание.

Я хотел бы заранее поблагодарить вас, хорошего дня.

1 Ответ

0 голосов
/ 29 апреля 2018

Моим первым предложением было бы отказаться от 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), содержимое которого содержит инструкции по замене элемента с определенным идентификатором (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) ]) ])].
...