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-ify'。 我一直在嘗試這些方面：

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

...這是行不通的，因為我顯然錯過了一些秘密醬。 一位Seaside專家可以為我提供一個關於將“常規”回調代碼轉換為“jQuery Ajax”回調代碼的快速教程嗎？

更新我非常接近搞清楚這一點; 在瀏覽網頁並重新審閱Seaside書中的章節草稿后，我將Ajax-ified按鈕更改為：

(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沒有為文本框提供值，盡管我再次得到在腳本窗口中顯示self getResult時的正確值。

UPDATE TWO我的'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請求中觸發服務器端的回調，就像在a'中一樣標准'表格提交。 無需更改表單的實現！

接下來，您將要禁止按下提交按鈕的默認瀏覽器行為，該按鈕是在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放在腳本回調中，而不是放在自己的回調塊中。

Answer 2

“沒有發生任何事情”，因為你所做的就是向圖像發送一個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'.