jquery - Smalltalk Seaside - jQuery Ajax 回调

Question

所以我有一个使用此代码可以正常工作的非 Ajax 回调(“convert”方法计算“result”实例变量的新值):

        html form: [
        html text: 'Number to convert: '.
        html textInput
            callback: [ :value | self setNumtoconvert: value ];
            value: numtoconvert.
        html break.
        html text: 'Result: '.
        html text: result.
        html break.
        html submitButton
            value: 'Convert';
            callback: [ self convert ]
    ].

...现在我正在尝试使用 jQuery 对其进行“Ajax 化”。我一直在尝试以下方法:

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

...这不起作用，因为我显然缺少一些 secret 武器。 Seaside 专家能给我一个关于将“常规”回调代码转换为“jQuery Ajax”回调代码的快速教程吗？

更新我已经非常接近弄清楚这一点了；在搜索 Web 并重新审阅 Seaside 书中的草稿章节后，我将 Ajax 化按钮更改为:

(html button)
    onClick: ((html jQuery ajax)
        callback:[:val | self setNumtoconvert: val.
            self convert.
            Transcript show: self getResult.]
            value:(html jQuery: '#txtNumToConvert') value;
        onComplete: ((html jQuery: '#txtResult') value: self getResult)
        );
    id: 'calclink';
    with: 'Convert'.

现在唯一的问题是如何设置“#txtResult”文本框的值； Transcript show: self getResult 显示正确的值，但我无法获取“onComplete”行来更新“#txtResult”值。我可以使用 onComplete: ((html jQuery: '#txtResult') value: 'hello there') 在文本框中插入字符串常量，但 self getResult 不是' t 为文本框提供值，尽管在转录窗口中显示 self getResult 时我再次获得了正确的值。

更新两个我的“onComplete”行确实有效，但只有在按下按钮(计算值)、刷新页面，然后再次按下按钮(在“txtResult”文本框中显示计算值)之后才能工作。我该如何解决这个问题？

我的答案

我终于想出了一个我真正喜欢的更容易理解(对我而言)且不那么冗长的解决方案:

renderContentOn: html
html form:[     
    html textInput
       id: #txtNumToConvert;
       callback: [ :value | self setNumtoconvert: value ];
       value: numtoconvert.
    html break.
    html span
       id: #result;
       with: result.
  html break.
  html anchor
     url: 'javascript:void(0)';
     onClick: ((html jQuery id: #result) load
       serializeForm;
       html: [self convert. html span with: result]);
     with: 'Convert to Decimal'.
 ]

Answer 1

首先，您还需要触发表单内字段的回调。以下代码将点击事件处理程序附加到执行 ajax 请求的按钮，该请求将序列化整个表单，然后执行按钮的回调。

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

当您使用常规表单提交时，Seaside 将为您触发表单内所有字段的回调。当你想以ajax请求触发表单提交时，Seaside-jQuery的#serializeForm方法也会序列化表单内所有输入字段的内容，并在服务器端以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 放在脚本回调中的原因是 Seaside-gotcha:你只能在每个 ajax 请求上指定一个“响应生成”回调(例如，只有一个脚本、html、json 回调)根据要求)。这是一个逻辑限制，因为单个请求只能生成单个响应。但是，您可以添加多个“辅助”回调(例如序列化表单回调、callback:json: 等)，但使用 #callback: 指定回调> 也是 Seaside 代码中的主要回调。因此，我需要将 self Convert 放在脚本回调中，而不是放在它自己的回调 block 中。