<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Inline Edit Box Widget Demo</title> <script type="text/javascript"> var djConfig = {isDebug: true}; </script> <script type="text/javascript" src="../../dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.InlineEditBox"); dojo.require("dojo.event.*"); dojo.hostenv.writeIncludes(); </script> <script type="text/javascript"> function saveHandler(newValue, oldValue,name) { dojo.debug("onSave was called -- New Value: " + newValue + " : Old Value: " + oldValue); }; function cancelCall(){ dojo.debug('onCancel was called.'); }; function changeCall(newValue,oldValue){ dojo.debug('onChange was called'+"New Value: " + newValue + " : Old Value: " + oldValue); }; dojo.addOnLoad(function(){ var editable = dojo.widget.byId("editable"); dojo.event.connect(editable, "onSave", "saveHandler"); dojo.event.connect(editable,'onChange','changeCall'); dojo.event.connect(editable,'onCancel','cancelCall'); }); </script> <style type="text/css"> body { font-family : sans-serif; background:#fff; } .inlineEdit { background-color: #CCC76A; } </style> </head> <body> <h1 id="editable" dojoType="inlineEditBox">Edit me - I trigger the callbacks onSave,onCancel,onChange</h1> <p id="areaEditable" dojoType="inlineEditBox" mode="textarea"> I'm one big paragraph. Go ahead and edit me. I dare you. The quick brown fox jumped over the lazy dog. Blah blah blah blah blah blah blah ... </p> <p> These links will <a href="#" onClick="dojo.widget.byId('areaEditable').disable()">disable</a> / <a href="#" onClick="dojo.widget.byId('areaEditable').enable()">enable</a> the text area above. </p> <p id="backgroundArea" class="inlineEdit" dojoType="inlineEditBox" > This text should have a colored background when not in editing mode. </p> <h2 dojoType="inlineEditBox" value="Parameter text value"></h2> </body> </html>