Problems using jeditable and autogrow


I work on a Webproject using jQuery and CakePHP. I use jeditable as an inplace edit plugin. For textareas I extend it using the autogrow plugin.

Well, I have two problems with this:

  • First, autogrow does only work on Firefox, not on IE, Safari, Opera and Chrome.
  • Second, I need a callback event for jeditable, when its finished showing the edit-component, to recalculate the scrollbar

Im not so familiar with Javascript, so i can't extend/correct this two libraries by my own. Has anyone used another js-library for inplace edit with auto growing textareas (no complete editors like TinyMCE, I need a solution for plain text)?

I also found Growfield, it would work for other browsers, but there's no jeditable integration...

(sorry for my english)


Thank you Alex! Your growfield-Plugin works. In meantime I managed to solve the other problem. I took another Scroll-Library and hacked a callback event into the jeditable-plugin. It was not that hard as I thought...

Mika Tuupola: If you are Interested in my modified jeditable (added two callback events), you can get it here. It would be great if you would provide these events in your official version of jeditable!

Here is my (simplified) integration code. I use the events for more then just for the hover effect. It's just one usecase.

$('.edit_memo').editable('/cakephp/efforts/updateValue', {
  id            : 'data[Effort][id]',
  name          : 'data[Effort][value]',
  type          : 'growfield',
  cancel        : 'Abort',
  submit        : 'Save',
  tooltip       : 'click to edit',
  indicator     : "<span class='save'>saving...</span>",
  onblur        : 'ignore',
  placeholder   : '<span class="hint">&lt;click to edit&gt;</span>',
  loadurl       : '/cakephp/efforts/getValue',
  loadtype      : 'POST',
  loadtext      : 'loading...',
  width         : 447,
  onreadytoedit : function(value){
    $(this).removeClass('edit_memo_hover'); //remove css hover effect
  onfinishededit : function(value){
    $(this).addClass('edit_memo_hover'); //add css hover effect

knight_killer: What do you mean Autogrow works only with FireFox? I just tested with FF3, FF2, Safari, IE7 and Chrome. Works fine with all of them. I did not have Opera available.

Alex: Is there a download link for your Growfield Jeditable custom input? I would like to link it from my blog. It is really great!

This video can help you solving your question :)
By: admin