[Twisted-web] DOM manipulation in an athena widget

Phil Mayers p.mayers at imperial.ac.uk
Sat Sep 30 18:14:14 CDT 2006


Following on from my post of a couple of weeks ago, I'm rendering a 
*large* (~150 editable fields) form for a CRUD application and am 
wanting client-side processing of incremental updates to said form, 
since round-tripping adds considerable delay to the user experience.

I'm sending the form as a table with appropriate athena:handler defined. 
On a mouse click, the athena:handler replaces the <span> containing the 
text with an <input type="text" /> or other control as appropriate.

What I'm then trying to do is hook up an event handler to onBlur (or 
whatever) to compare the old and new values, set a dirty flag and enable 
the "save" button.

I couldn't find a way to do this with the Divmod.NotQuiteMochiKit 
packages (indeed, they seem wedded to innerHTML), so I whacked MochiKit 
in the page header and tried this:

class Frag(athena.LiveFragment):
   jsModule = u"db.Record"
   docFactory = loaders.stan(
     T.table(render=T.directive('sequence'), data=T.directive('sql'))[
       T.tr(pattern='item', render=T.directive('mapping'))[
         T.td[T.slot(name='fieldName')],
         T.td[
           athena.handler(event='onclick', handler='editField'),
           T.span[T.slot(name='fieldValue')],
         ], # end of td
       ], # end of tr
     ])

...and the jsmodule has:

db.Record.methods(
   function editField(self, node, event) {
     if (node.inEdit) return false;
     /* make the textbox */
     var tb = INPUT({'type': 'text', 'value': scrapeText(node)});
     /* swap the span for a textbox */
     replaceChildNodes(
       getElementsByTagAndClassName('span', null, node)[0], tb
     );

     /* THIS FAILS */
     connect(tb, 'onblur', self.saveField);

     return false;
   });

The nevow debug console thing logs "self has no properties" - what is 
self in this context of a widget method/event call? Why does it have no 
properties?

Absent a more complete set of DOM and event handling functions, and 
given whatever the (to me) unfathomable incompatibility with Mochi and 
the Divmod runtime is, how does one attach event handlers to client-side 
created DOM nodes? Are the events normalised cross-browser as they are 
in Mochi? There's an "xbevent" function in one of the examples that 
indicates not?

Suggestions welcome. Sorry for abruptness of mail, workrave is nagging 
me to stop typing...



More information about the Twisted-web mailing list