How to get an element's position in real time

Question

I need to get the position of a div in real time, and I'm trying the following:

html div
  id: 'square';
  script: (html jQuery new draggable 
    onStop: (html jQuery ajax 
      callback: [Transcript show: html jQuery this position])).

Unfortunately it doesn't work, the transcript shows: 'a JQueryInstance ($(this).position())'

What's the proper way to do this?

Answer 1

Try this:

 html div 
   id: 'square'; 
   script: (html jQuery this draggable  
     onDrag: ((html jQuery script: 
     [:builder | builder <<  (builder jQuery get                                       
       callback: [ :value | Transcript show: (value at: 'top')@(value at: 'left')]
       json: (builder jQuery this position) ). 
     ]) asFunction: #(event ui)

In your code, html jQuery this position will evaluate to a script-text that never gets to the client because it is not written to the document. Instead it gets written to the Transcript, whenever the callback is triggered. To get the script to the client, use the callback:json: method, that executes the script passed as argument to json:, transfers the result back to Seaside using ajax and then triggers the callback with the submitted value.