Search code examples
jquerycssinplace-editing

Set size of textarea using REST in Place

I'm not understanding how to bind the event mechanism to JQuery in order to set the size of the textarea using REST-in-Place. Can someone point me in the right direction?

Per the documentation, "ready.rest-in-place when the form has been built. This event can be used e.g. to change the size of the field or textarea."

So I've got this loading, but it doesn't seem to change the styling:

$('.rest-in-place-body').bind('ready.rest-in-place', function(event, json) {
    el = $(this);
    el.style.width = "250px";
    el.style.rows = "10";
});

where my attribute to be edited is Model#body

What am I not getting right about this?

UPDATE: Here is the div that is clicked on. I'm not able to see the HTML created by jquery as when I look in Firebug to see what has been changed, it deactivates the edit in place and goes back to this. Maybe there's another way I don't know about?

<div id="event-input" class="rest-in-place" data-url="/events/2" data-object="post" data-formtype="textarea" data-attribute="body">Click to Edit...</div>
Solution

  • The textarea generated by restinplace wont have the class name rest-in-place-body. Try

    $('#event-input').bind('ready.rest-in-place', function(event, json) {
  $(this).find('textarea').attr('rows', '10');
}