title: Smalltalk Seaside - jQuery Ajax Callback
body: <p>So I have a non-Ajax callback working fine using this code (the 'convert' method calculates a new value for the 'result' instance variable):</p>
  
  <pre><code>        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 ]
      ].
  </code></pre>
  
  <p>...and now I'm trying to 'Ajax-ify' it using jQuery. I've been trying something along these lines:</p>
  
  <pre><code>(html button)
      onClick: ((html jQuery ajax)
          callback: [ self convert]);
      id: 'calclink';
      with: 'Convert'.
  </code></pre>
  
  <p>...which isn't working, since I'm obviously missing some secret sauce.  Can a Seaside expert chime in and give me a quick tutorial on converting 'regular' callback code to 'jQuery Ajax' callback code?</p>
  
  <p><strong><em>UPDATE</em></strong>
  I'm very close to figuring this out; after scouring the Web and re-reviewing the draft chapters in the Seaside book, I've changed my Ajax-ified button to this:</p>
  
  <pre><code>(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'.
  </code></pre>
  
  <p>Now the only question is how to set the value of the '#txtResult' textbox; <code>Transcript show: self getResult</code> is displaying the correct value, but I can't get the 'onComplete' line to update the '#txtResult' value. I can use <code>onComplete: ((html jQuery: '#txtResult') value: 'hello there')</code> to insert a string constant in the textbox, but <code>self getResult</code> isn't providing a value for the textbox, although, again, I get the correct value when displaying <code>self getResult</code> in the transcript window.</p>
  
  <p><strong><em>UPDATE TWO</em></strong>
  My 'onComplete' line <em>does</em> work, but only after pressing the button (to calculate the value), refreshing the page, then pressing the button again (to display the calculated value in the 'txtResult' textbox. How do I fix this?</p>
  
  <p><strong><em>MY ANSWER</em></strong></p>
  
  <p>I finally came up with a solution that is easier to understand (for me) and less verbose that I really like:</p>
  
  <pre><code>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'.
   ]
  </code></pre>