Smalltalk Seaside-jQuery Ajax回调

因此，我有一个使用此代码的非Ajax回调可以正常工作（“convert”方法为“result”实例变量计算一个新值）：

…现在我正试图使用jQuery“Ajax化”它。我一直在尝试以下几点：

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

…这不起作用，因为我显然错过了一些秘密酱汁。一位海滨专家能插话给我一个关于将“常规”回调代码转换为“jqueryajax”回调代码的快速教程吗

更新 我很快就能弄明白这一点；在浏览了网页并重新审阅了Seaside book中的章节草稿后，我将我的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”文本框的值<代码>成绩单显示：self-getResult正在显示正确的值，但我无法获取“onComplete”行以更新“#txtreult”值。我可以使用

onComplete:（（html jQuery:'#txtreult'）value:'hello there'）

在文本框中插入一个字符串常量，但是

self-getResult

并没有为文本框提供值，尽管我在成绩单窗口中显示

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

“什么都没有发生”，因为您所做的只是向图像发送一个AJAX请求。然而，您似乎想要触发一个DOM节点的更新。这需要一个带有额外处理程序的AJAX请求，该处理程序使用一些渲染的结果更新DOM元素

在图像方面，您缺少的基本上是：

• 要更新的元素的id是什么
• 应该执行什么呈现代码来生成替换的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'.

---

首先，您还需要触发表单中字段的回调

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

当您使用常规表单提交时，Seaside将为您触发表单内所有字段的回调。当您希望作为ajax请求触发表单提交时，Seaside jQuery的

#serializeForm

方法还将序列化表单内所有输入字段的内容，并在服务器上触发它们的回调在ajax请求中使用ide，就像在“标准”表单提交中一样。无需更改表单的实现

接下来，您将希望抑制按“提交”按钮的默认浏览器行为，这是在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'.

---

上面的代码生成一个ajax请求，该请求执行表单序列化（执行其服务器端回调）并生成脚本以修改页面上的结果。我将

自转换

放在脚本回调中的原因是一个Seaside gotcha：您只能在每个ajax请求上指定一个“响应生成”回调（例如，每个请求只能指定一个脚本、html、json回调）。这是一个逻辑限制，因为一个请求只能生成一个响应。但是，您可以添加多个“辅助”回调（例如序列化表单回调、一个

回调：json:

，等等）但是，使用

#callback:

指定的回调也是Seaside代码中的主回调。因此，我需要将

自转换

放在脚本回调中，而不是放在它自己的回调块中。

您能更详细地描述一下什么是“不起作用的”？嗯，“结果”文本框没有用assi的结果更新正在为“result”类实例变量指定一个新值。当我单击“jQuery按钮”时，我看到一个Ajax调用被触发（使用Firebug），但实际上似乎什么都没有发生……那么，当使用纯Javascript时只需要一次往返时，为什么需要两次往返服务器呢？在您的代码中，呈现的值不是您刚刚输入的值，而是生成脚本时出现的值。您可以通过组合来避免两次往返尽管如此，我还是会更新我的答案来说明这一点。谢谢你的帮助，Johan！

(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'.