I've got an application where editor(s) are created programmatically, and then (for some of them) an onBlur event is attached to the Editor. The javascript looks something like:
function loadIditable(json) {
//get json object from perl
var myJSONObject = eval('(' + json + ')');
for (var cnt=0;cnt
However, this hasn't been working as it should. If I have dojo.connect(descEditor, "onBlur", testFunction); testFunction never is called. If I have dojo.connect(descEditor, "onBlur", testFunction()); testFunction gets called once - when the editor is initially created - but the onBlur event never gets triggered after then. Looking through the dojo source, I saw that editor references _onBlur (a private function that seems to be publically available?); however trying to use _onBlur instead of onBlur doesn't fix this problem.
I'm assuming I am doing something wrong here, as the ability to trigger an event onBlur for an editor (eg, when the client clicks away from the editor, I use CGI::Ajax to trigger a perl save function) seems pretty essential. Anybody have suggestions or see what I'm doing wrong here? Or will this approach simply not work, and if not, is there any way to trigger an event onBlur for a dijit.Editor?
Thanks in advance.
/ Krishna
use onChange
//do your ajax saving here
}
//see the comment in RichText widget on when onChange is fired
dojo.connect(descEditor, "onChange", testFunction);
--
http://www.liucougar.net
生于忧患，死于安乐
"People's characters are strengthened through struggle against difficulties; they are weakened by comfort."
- Old Chinese adage
i'll give it a try
thanks for the suggestion; I'm at school right now, but will give that a try when I got in to work this afternoon. Not sure why onChange would "replace" onBlur behaviour (eg, clicking away from an active node is onBlur; making changes while that node is still active is onChange) but I'm assuming from your remark to check the comment in RichText widget that the library is overriding onChange behaviour to make it fire when the client deactivates (eg clicks or tabs away from) an active node? Hoping this will fix my problem, but again, I'm not sure why Dojo would override javascript behaviour at such a semantic level (onBlur behaviour should fire onBlur, not onChange, no?).
Will report more this afternoon (EST)
thanks
diagnosing issue..
Ok, I think I'm getting somewhat closer: it seems that you can't really do a dojo.connect with the "editable" part of the editor, just the "toolbar" part. From what I gather, this is because the "id" attribute related to the editor is only for the toolbar - that actual editable area is an iframe, without any id attribute. I've made a simplified test case to verify this:
@import "/server-dojo-release-1.0.2/dijit/themes/tundra/tundra.css"; dojo.require("dijit.Editor"); function createEditor(){ var buildEditor = new dijit.Editor({ class: 'tundra', }, dojo.byId('testEditor')); dojo.connect(dojo.byId('testEditor'), 'onclick', foo); dojo.connect(dojo.byId('testText'), 'onblur', foo); } function foo(){ alert('helo world'); }
If I click on the toolbar created in testEditor, foo() fires. However it does not seem possible to connect the action to the editable area itself. I tried assigning an attribute to the editor object like:
... var buildEditor = new dijit.Editor({ class: 'tundra', id: 'whatever' }, dojo.byId('testEditor')); dojo.connect(dojo.byId('whatever'), 'onclick', foo); ...but that just changes the id related to the toolbar of the editor, it does not assign an id to the editable iframe itself. As such, there seems to be no way for me to assign a dojo.connect event to the editable iframe area, which is what I need to do (by connecting an onblur to the iframe insideithe editor, so that after editing, if the client clicks elsewhere on the page, it can automatically trigger a save function). I have also tried using the editor object itself in the dojo.connect, eg:
... var buildEditor = new dijit.Editor({ class: 'tundra', }, dojo.byId('testEditor')); dojo.connect(buildEditor, 'onclick', foo); ...but yet again this connects the event to the toolbar (ie that
So, then looking at the documentation for Editor, I see something called "Extension Points" where there is an onChange "Extension Point" for Editor. The only documentation I could find about this is here and doesn't help in the slighest (I don't know who wrote that page, but the example of Extension Points simply doesn't work, doesn't make sense, and they have not answered anybody's questions about how one would actually use Extension Points). I'm starting to think I need to use an extension point for onChange to get the behaviour I want, but can't find documentation anywhere that explains clearly how I might do this...
any help would be greatly appreciated. This seems like very basic, simple, and commonly requested behaviour; the fact that it is THIS difficult to find out how to do this really deters me from dojo.
nutters
Ok, this is a really ugly fix, but it works. As it seems there is no way to use the dijit Editor object itself to assign an event to the iframe inside of the editor (ie, the editable area) - or at least I have not been able to find any way to do this, and have spent way too long searching and trying things out - I decided to change my approach and access the iframe(s) through the DOM instead. So I've got it working - if you recall from my first post, I am using an array of JSON objects to generate multiple editor instances, some of which need this onblur behaviour. To get this working, I've utilized the following:
... //create editor ... switch (myJSONObject[cnt].save_type){ ... case 'auto': // should work? question asked at http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dojo-connect-dijit-editor // "hack" of sorts - using DOM access to the iframe inside the editor - should not have to do this!!! if(document.all){ var iframe = window.frames[cnt]; iframe.attachEvent("onblur",foo); }else{ var iframe = window.frames[cnt].document; iframe.addEventListener("blur",foo,false); } break; } ...or rather, since I'm loading dojo anyway and it does the isIE check:
However this solution has some pretty obviously faults - first and foremost, if there are any other frame or iframe objects on the page, my window.frames[cnt] is going to be looking at the wrong iframe. I really can't believe that there would be no way to either 1) specify a name/id for the iframe inside an editor or 2) access that iframe via the editor object, for the purposes of something like dojo.connect(myEditorObject.insideIframe,'event',action) or even 3) have dojo.connect be smart enough to understand that behaviour implicitly. Maybe I've been looking in the wrong side - perhaps extension points are what I needed to use - however the complete joke of a documentation available for extension points and my not having time to spend an entire day screwing around looking through the source code trying to figure that out has ruled out that option.
Anyhow, it is mostly working except for the afforementioned possible problems (which could be fixed by even more extensive DOM manipulation on my part - ie, checking to make sure the window.frames[cnt] is a frame beneath a toolbar div) but the convoluted way I've had to go about doing this is really frustrating!!!
better fix!
for some reason, some changes i made caused this method to fail (i think because things were loading even more asynchronously). anyhow, found this blog posting - http://robsanheim.com/2006/05/23/browser-bugs-onblur-and-onfocus-with-if... - that led me to a much more elegant solution.
dojo.connect(iframe,'onblur',foo);
still strange that this isn't built into the editor itself (so that i could just set oncontentblur: foo when creating it) but i'll do so myself for my super-hacked dojo distro.