Smalltalk Seaside — обратный вызов jQuery Ajax

Во-первых, вам также нужно активировать обратные вызовы для полей внутри формы. Следующий код прикрепляет обработчик события щелчка к кнопке, которая выполняет запрос ajax, который сериализует всю форму, а затем выполняет обратный вызов кнопки.

(html button)
   onClick: ((html jQuery ajax)
       serializeForm;
       callback: [ self convert ]);
   id: 'calclink';
   with: 'Convert'.

Когда вы используете обычную отправку формы, Seaside инициирует обратные вызовы для всех полей внутри формы. Если вы хотите инициировать отправку формы как запрос ajax, метод #serializeForm Seaside-jQuery также сериализует содержимое всех полей ввода внутри формы и запускает их обратные вызовы на стороне сервера в запросе ajax, как и в «стандартном». ' подача формы. Не нужно менять реализацию формы!

Затем вы захотите подавить поведение браузера по умолчанию, когда вы нажимаете кнопку отправки, которая отправляет форму в запросе POST и заставляет браузер делать запрос на всю страницу, что заставит Seaside (повторно) отображать страницу. Есть несколько способов сделать это, но проще всего просто изменить тип кнопки:

(html button)
   bePush;
  ...

Наконец, вам нужно обновить содержимое страницы. Вы используете #onComplete: правильно, за исключением того, что этот код javascript генерируется при первом отображении страницы. Следовательно, он отображает значение self getResult в момент отображения страницы. Вам нужно значение после отправки формы. Для этого требуется еще один обратный вызов:

(html button)
   bePush;
   onClick: ((html jQuery ajax)
       serializeForm;
       callback: [ self convert ];
       onComplete: ((html jQuery: '#txtResult') load html: [:r | self renderTextResultContentsOn: r]));
   id: 'calclink';
   with: 'Convert'.

ОБНОВЛЕНИЕ Приведенный выше код выполняет два обращения к серверу, которые можно оптимизировать, объединив обратные вызовы в один запрос ajax:

(html button)
   bePush;
   onClick: ((html jQuery ajax)
       serializeForm;
       script: [:s | self convert. s << ((s jQuery: '#txtResult') html: [:r | self renderTextResultContentsOn: r])]);
   id: 'calclink';
   with: 'Convert'.

Или, более элегантно:

    (html button)
       bePush;
       onClick: ((html jQuery id: #count) load
                    serializeForm;
                    html: [:r | self convert. self renderTextResultContentsOn: r]);
       with: 'Convert'.

Приведенный выше код генерирует запрос ajax, который выполняет сериализацию формы (выполнение обратных вызовов на стороне сервера) и генерирует сценарий для изменения результата на странице. Причина, по которой я поместил self convert внутри обратного вызова сценария, заключается в том, что вы можете указать только один обратный вызов «генерация ответа» на каждый запрос ajax (например, только один обратный вызов script, html, json на запрос). Это логическое ограничение, поскольку один запрос может генерировать только один ответ. Однако вы можете добавить несколько «вторичных» обратных вызовов (например, обратные вызовы сериализации формы, callback:json: и т. д.), но обратный вызов, указанный с использованием #callback:, также является основным обратным вызовом в коде Seaside. Следовательно, мне нужно было поместить self convert внутри обратного вызова сценария, а не в его собственном блоке обратного вызова.

«Ничего не происходит», потому что все, что вы делаете, это отправляете запрос AJAX к изображению. Однако вам кажется, что вы хотите инициировать обновление узла DOM. Для этого требуется запрос AJAX с дополнительным обработчиком, который обновляет элемент DOM с результатом некоторого рендеринга.

То, что вам не хватает на стороне изображения, в основном:

• каков идентификатор элемента, который вы хотите обновить?
• какой код рендеринга должен быть выполнен для генерации HTML для замены?

Я не использую jQuery, но, глядя на код Seaside jQuery, я думаю, что ваш фрагмент должен выглядеть примерно так:

(html button)
  onClick: (html jQuery ajax
    "pass the id of the element to update"
    id: 'calclink';
    callback: [ self convert];
    "specify the method to call for rendering"
    html: [ :canvas | self basicRenderMyDivOn: canvas ];
    yourself);
  id: 'calclink';
  with: 'Convert'.