Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Scriptaculous in place editor

    Hi, I am simply trying to implement the ajax in place editor system with scriptaculous.

    http://wiki.script.aculo.us/scriptac....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

  • #2
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by spetsacdc View Post
    Hi, I am simply trying to implement the ajax in place editor system with scriptaculous.

    http://wiki.script.aculo.us/scriptac....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

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.....

  • #4
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Hey, I think I may have fixed it...try this:

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

    Code:
    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.

  • #5
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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:

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

  • #6
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    wrap the getElementsByClassName function with $A().

    or replace the whole lot with:
    Code:
    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.
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();
    },

    Quote Originally Posted by GJay View Post
    wrap the getElementsByClassName function with $A().

    or replace the whole lot with:
    Code:
    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.

  • #8
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts
    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

  • #9
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •