empty text for Ajax.InPlaceEditor

Nik Jun 24

I was playing with the Scriptaculous Ajax.InPlaceEdit control this afternoon, and realised it didn’t support having “empty” text (default text to show if there was nothing to edit).

Someone on the Wiki had a partial solution, but it’s a little out of date and wasn’t working for us 1.6-ers (Doesn’t use the cool new $super stuff).

So I wrote my own! Enjoy :)

Ajax.InPlaceEditorWithEmptyText = Class.create(Ajax.InPlaceEditor, {

  initialize : function($super, element, url, options) {

    if (!options.emptyText)        options.emptyText      = "click to edit...";
    if (!options.emptyClassName)   options.emptyClassName = "inplaceeditor-empty";

    $super(element, url, options);

    this.checkEmpty();
  },

  checkEmpty : function() {

    if (this.element.innerHTML.length == 0 && this.options.emptyText) {

      this.element.appendChild(
          new Element("span", { className : this.options.emptyClassName }).update(this.options.emptyText)
        );
    }

  },

  getText : function($super) {

    if (empty_span = this.element.select("." + this.options.emptyClassName).first()) {
      empty_span.remove();
    }

    return $super();

  },

  onComplete : function($super, transport) {

    this.checkEmpty();
    return $super(transport);

  }

});

what other people thought

Man, Javascript looks trashy with short lines…. copy + paste may be in order :)

Nik, June 24th, 2008 at 5:53 pm

i’ve got 1.8 and it doesn’t seem to work. it doesn’t break anything, but i get no “click to edit” showing up….. any ideas?

chadd, July 22nd, 2008 at 2:33 am

@chadd: Not sure :) Are you sure you’re creating a new InPlaceEditorWithEmptyText rather than just a new Ajax.InPlaceEditor?

Nik, July 22nd, 2008 at 9:55 am

that was it. thanks much. this works great now.

chadd, July 30th, 2008 at 1:30 am

hi
first,thanks for this extension of inplaceeditor
i’m with prototype 1.6.0.1 and everything works except if user press cancel or leave input box empty. In this case empty text don’t get back.
I change the last extension name ‘onComplete’ (which seems not to exists in my prototype version) by ‘leaveEditMode’. It works fine.
Result :
leaveEditMode : function($super, transport) {
this.checkEmpty();
return $super(transport);
}
May that help someone ;)

psyray, August 4th, 2008 at 11:18 am

Fantastic ! That did help.

albo, August 18th, 2008 at 4:13 am

I am getting a Ajax.InPLaceEditorWithEmptyText is not a constructor… What am I doing wrong? I am using the above code.

Grant Griffith, August 28th, 2008 at 6:45 am

I haven’t tried this code but this line looks suspect:

if (empty_span = this.element.select(“.” + this.options.emptyClassName).first())

Of course they will equal if you set empty_span to the conditional. Maybe a == would be more appropriate. Or maybe I’m missing something.

Keep it up!

Jan, September 8th, 2008 at 11:52 pm

@jan: Nope, that’s how it’s meant to be. It’s using the assignment operator there so that I can then use the element we’ve found inside the conditional block.

Nik, September 9th, 2008 at 10:32 am

Hi, i’m using it and everything looks nice until i tried to change some options like cancelText, savingText or clickToEditText…

Any Idea?

PS: Thanx so much for the extension any how… ;)

Karina, September 13th, 2008 at 2:53 am

@Karina: Hmmm, I’m not sure what’s wrong with that. Try emailing me your code and I’ll see what I can do :)

Nik, September 14th, 2008 at 7:45 pm

Just porting my site from rails 1.2.3 to 2.2.2 and ran into a problem with the Ajax.InPlaceEditorWithEmtpyText. I’ve got the ‘Click to Edit’ (in place of empty text) bit working OK (i.e. I see the dummy text) with the Prototype 1.6.0.3 and script.aculo.us 1.8.2, but when I click on the field and then click ‘Cancel’ I lose the handle on the still empty field completely. As far as I can tell, there is no communications with the rails backend, so the problem seems to be with what happens when ‘Cancel’ gets hit, hence totally client-side.
The previous version, when used with the older prototype was working a treat, so I’m sure it’s something simple I’m overlooking ?.
Any help would be muchly appreciated … thanks :0)

George, January 9th, 2009 at 5:45 am

Actually, I think I found a fix ?. I borrowed the handleFormCancellation function from the standard InPlaceEdit function in Control.js and added the checkEmpty() function .. like …

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

Works, but I can’t seem to set the field back to ‘empty’ again … but that’s sorta OK I suppose ?.

George, January 9th, 2009 at 6:04 am

I took psyray’s change above and made another little tweak:

leaveEditMode : function($super, transport) {
retval = $super(transport);
this.checkEmpty();
return retval;
}

Call checkEmpty after you call $super, that way if you just cleared out the text that was there, it will return to “click here to edit…”

I put the whole thing that is working well for me at http://gist.github.com/131324.

Jay K, June 18th, 2009 at 4:14 am

hi im using prototype 1.6 and scriptaculous 1.8 and the inPlaceEditor with the extension for emtpy textfields, but it doesnt work :( i dont know why. Any ideas ?

Christian P., October 5th, 2009 at 1:50 pm

have your say