Problems using jeditable and autogrow

Question

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)

Answer 1

I didn't see any problems using Autogrow with jeditable in any browsers but here is an implementation of Growfield with jeditable. It works much in the same way that the Autogrow plugin for jeditable does. You create a special input type for jeditable and just apply .growfield() to it. The necessary javascript is below, a demo can be found here.

<script type="text/javascript">
/*  This is the growfield integration into jeditable
 You can use almost any field plugin you'd like if you create an input type for it.
 It just needs the "element" function (to create the editable field) and the "plugin"
 function which applies the effect to the field.  This is very close to the code in the
 jquery.jeditable.autogrow.js input type that comes with jeditable.
 */
$.editable.addInputType('growfield', {
    element : function(settings, original) {
        var textarea = $('<textarea>');
        if (settings.rows) {
            textarea.attr('rows', settings.rows);
        } else {
            textarea.height(settings.height);
        }
        if (settings.cols) {
            textarea.attr('cols', settings.cols);
        } else {
            textarea.width(settings.width);
        }
        // will execute when textarea is rendered
        textarea.ready(function() {
         // implement your scroll pane code here
        });
        $(this).append(textarea);
        return(textarea);
    },
    plugin : function(settings, original) {
     // applies the growfield effect to the in-place edit field
        $('textarea', this).growfield(settings.growfield);
    }
});

/* jeditable initialization */
$(function() {
 $('.editable_textarea').editable('postto.html', {
  type: "growfield", // tells jeditable to use your growfield input type from above
  submit: 'OK', // this and below are optional
  tooltip: "Click to edit...",
  onblur: "ignore",
  growfield: { } // use this to pass options to the growfield that gets created
 });
})

Answer 2

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

Answer 3

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!

Answer 4

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
  }
});