[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