...

View Full Version : Scriptaculous in place editor



spetsacdc
03-23-2008, 03:28 AM
Hi, I am simply trying to implement the ajax in place editor system with scriptaculous.

http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor

Its easy to install the script and everything, but I am trying to do the extra part he talks about at the bottom:

Small extension to editor to add a text in case field is empty.

Now, I have everything working, but if you click the "click to edit..." thing that the extension adds to an empty field, then click cancel, the field goes blank instead of back to "click to edit..." so the user can't edit it unless he refreshes the page. Is this a bug? Anyone know how to edit the script to call the if empty function when they click cancel?

Thanks

weazil
04-09-2008, 07:54 PM
Hi, I am simply trying to implement the ajax in place editor system with scriptaculous.

http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor

Its easy to install the script and everything, but I am trying to do the extra part he talks about at the bottom:

Small extension to editor to add a text in case field is empty.

Now, I have everything working, but if you click the "click to edit..." thing that the extension adds to an empty field, then click cancel, the field goes blank instead of back to "click to edit..." so the user can't edit it unless he refreshes the page. Is this a bug? Anyone know how to edit the script to call the if empty function when they click cancel?

Thanks

I've been toying with a fix for it, basically what it looks like is back in the summer from 1.6 - 1.8 InplaceEditor was completely rewrote.... onComplete is no longer called when you leave the field so it never checks to see if its empty.

If you change the code to read

FROM
Ajax.InPlaceEditor.prototype.__onComplete = Ajax.InPlaceEditor.prototype.onComplete;
TO
Ajax.InPlaceEditor.prototype.__onComplete = Ajax.InPlaceEditor.prototype.leaveEditMode;

and

FROM
onComplete: function(transport){
TO
leaveEditMode: function(transport){

... if you do an alert inside the leaveEditMode you can see now it will kick off.. but I can't figure out for the life of me when it comes back.... this.element.innerHTML.length it equals 2... and if you alert this.element.innerHTML it comes back with %OA%OA and thats where i'm stuck unsure what OA is... i can cheat and tell it to check to see if the length is 0 or 2... and it will put the click to edit back.. but what happens whe your field actually only has 2 characters in it :(

weazil
05-14-2008, 09:26 PM
Updated..... I had 2 blank lines kicking those %OA in there... if you make the changes listed above it will fix the click to edit... but in FF3 beta 5 it breaks again so back to square one for me.....

spetsacdc
05-14-2008, 10:47 PM
Hey, I think I may have fixed it...try this:

open controls.js and add this._checkEmpty(); after line 620 so you have:


handleFormCancellation: function(e) {
this.wrapUp();
if (e) Event.stop(e);
this._checkEmpty();
},

Works for me in firefox, ie, but in firefox beta 3 the entire script stopped working (even with that line taken out) so I have another problem.

spetsacdc
05-14-2008, 11:19 PM
Error: document.getElementsByClassName(this.options.emptyClassName, this.element).each is not a function
Source File: /extensions.js
Line: 32

This is the reason it doesn't work in firefox 3 beta 5 for me...

It doesn't like this part of the code:


getText: function(){
document.getElementsByClassName(this.options.emptyClassName,this.element).each(function(child){
this.element.removeChild(child);
}.bind(this));
return this.__getText();
},

GJay
05-15-2008, 08:38 PM
wrap the getElementsByClassName function with $A().

or replace the whole lot with:


getText: function() {
this.element.getElementsBySelector('.'+this.options.emptyClassName).invoke('remove');
}


The result of the getElsByClass isn't actually an array (it just acts a lot like one...), and so the Prototype extensions (.each and so on) aren't added to it. getElementsBySelector takes a CSS rule, so add a '.' to the front for a classname-restriction and returns an actual array of prototype-extended elements. Rather than removing the element from it's parent explicity, prototype gives you a 'remove()' method on elements, and by using 'invoke' you remove the need for an anonymous function.

weazil
05-16-2008, 09:46 PM
Thanks man that makes it editable again... the only downside is now if there was data there it drops you to a input box with undefined in it instead of the original text.

FIXXED....
it was missing the return piece.... :) figured it out and maybe this will help someone else out.

getText: function() {
this.element.getElementsBySelector('.'+this.options.emptyClassName).invoke('remove');
return this.__getText();
},


wrap the getElementsByClassName function with $A().

or replace the whole lot with:


getText: function() {
this.element.getElementsBySelector('.'+this.options.emptyClassName).invoke('remove');
}


The result of the getElsByClass isn't actually an array (it just acts a lot like one...), and so the Prototype extensions (.each and so on) aren't added to it. getElementsBySelector takes a CSS rule, so add a '.' to the front for a classname-restriction and returns an actual array of prototype-extended elements. Rather than removing the element from it's parent explicity, prototype gives you a 'remove()' method on elements, and by using 'invoke' you remove the need for an anonymous function.

spetsacdc
05-16-2008, 10:43 PM
Thanks for the help. So I just changed the getText function and it works for me. So weazil, did changing the getText function fix what you were doing and how it added "%OA", or did you add add this._checkEmpty(); after line 620 in controls.js ? Just wondering because I'm not sure how good that fix was.

I had given up with this script and used a simple script that didn't use scriptaculous, but this one looks a lot nicer. I just want to test it more to make sure it is very stable.

Thanks

weazil
05-18-2008, 04:23 PM
yea the %OA ended up being stupid returns at the end of one of my config files that gets included when the saving happens.... I did not change the control.js only the original add on.


took me quit a while to figure out it was some extra white space in my file....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum