Inline editing with Rails gem 'best_in_place' - bug: new lines are lost after edit on textarea

Question

I am using best_in_place gem to do some inline editing in a Rails app.

One of the property of my object is of type text, and I want it to be edited in a text area, so I did this:

<%= best_in_place @myobject, :description, :type => :textarea %>

It works, but when not being edited, all returns (\n) are removed.

I tried using simple_format, by adding :display_with => :simple_format to the options passed to best_in_place:

<%= best_in_place @myobject, :description, :type => :textarea, :display_with => :simple_format %>

When not being edited, the new lines are displayed as expected. But the click to enter edition is broken, and a new dash is added above. Clicking it display a textarea box, but it is empty, and the text entered there is not saved back to my object.

The content saved in my property is just plain text, it does not contain any html.

This issue (and patch) seemed related to my problem: https://github.com/bernat/best_in_place/pull/111
However, when applying the patch (manually, to the file .../gems/best_in_place-1.0.6/spec/spec_helper.rb), I still have the same problem.

Dan Sandland · Accepted Answer · 2012-05-30T03:08:56.130

I had the same problem and solved it by binding to the "ajax:success" event as described in the best_in_place documentation and converting the new lines to <br />'s.

$('.best_in_place').bind('ajax:success', function(){ this.innerHTML = this.innerHTML.replace(/\n/g, '<br />') });

You could also choose to use a lightweight markup language like textile or markdown instead of simple line breaks. Javascript converters for these can be found here (textile) and here (markdown).

I went with Textile since I could just use the textilize method in best_in_place's display_with option.

The updated javascript:

$('.best_in_place').bind('ajax:success', function(){ $(this).JQtextile('textile', this.innerHTML) });

Also, if you only want this behavior on best_in_place textareas you can check for the data-type attribute:

$('.best_in_place').bind('ajax:success', function(){ 
    if ($(this).attr('data-type') == 'textarea')
        $(this).JQtextile('textile', this.innerHTML) 
});

Lastly, match the conversion on the server side:

:display_with => lambda { |v| textilize(v).html_safe } // the RedCloth gem may be required.

I found that .html_safe was throwing an error when the content (v) was nil so I test for it `:display_with => lambda { |v| v.nil? ? '' : textilize(v).html_safe }` — Adam Pearlman, Aug 27 '14 at 06:01

score 4 · Answer 2 · answered Mar 09 '12 at 11:17

Found a half-working solution.

In show.html.erb:

<%= best_in_place @myobject, :description, :type => :textarea, :display_as => 'description_format'  %>

and in myobject.rb:

def description_format
  self.description.gsub(/\n/, "<br>")
end

It works as expected. Almost.
The only remaining problem: when you edit the text, after you unfocused from the textarea, the new lines are lost again. If you refresh the page, it is displayed correctly again.

score 1 · Answer 3 · edited Nov 06 '12 at 20:41

If \n is replaced with <br> and the user chooses to do more modifications, the user will see all the text on only one line, making it harder to read and edit.

Based on the answers above I made this solution, which removes any \r upon success.

$('.best_in_place').bind('ajax:success', function(){ 
    if ($(this).attr('data-type') == 'textarea') {
        this.innerHTML = this.innerHTML.replace(/\r/g, '')
    }
});

This ensures that no extra lines are displayed. The advantage of this solution is that if the user chooses to edit the field again, everything is shown as before.

score 0 · Answer 4 · answered Feb 10 '17 at 11:00

I think the answers here all work. This is just yet another alternative. You can add the best_in_place field in between a <pre> tag and it will take care of adding the lines. Of course some formatting and style changes will be required, but it easily solves the problem at hand.

score 0 · Answer 5 · answered Aug 28 '17 at 15:58

In response to the question below about line formatting being lost after an update. After some experimentation, I got this to work. This is an example of a field called "comment" which is used as a textarea and is stored as type text in the Database.

In the form:

div class: "single-spacing", id: "comment_div" do
    best_in_place coursedate, :comment, as: :textarea, url: [:admin,coursedate], ok_button: "Uppdatera", cancel_button: "Cancel", class: "editable", 
     :display_with => lambda { |c| simple_format(c.gsub("<br />", ""), {}, sanitize: false) }
end

In the css:

.single-spacing {
  ul br {
   display: none;
 }
  ol br {
  display: none;
 }
  div br {
   display: none;
  }
h3 {
  border-bottom: 1px dotted #e8e8e8;
   padding-bottom: 15px;
}
 blockquote {
   border-color: #a7c2d9;
    p {
      font-size: 14px;
      color: #777777;
      line-height: 1.5;
    }
  }
}

CoffeeScript:

# refresh textarea bip on coursedate when edited to reload line breaks after update
  $('#comment_div').bind 'ajax:success', ->
  $('#comment_div').load(document.URL +  ' #comment_div');
  return

score 0 · Answer 6 · answered Oct 24 '17 at 15:47

This did the trick for me.

  $('.best_in_place').bind 'ajax:success', -> 
    content = $(this).text().replace(/\n/g, "<br>")
    $(this).html(content)

or Jquery

$('.best_in_place').bind('ajax:success', function(){ 
    content = $(this).text().replace(/\n/g, "<br>")
    $(this).html(content)
});

Inline editing with Rails gem 'best_in_place' - bug: new lines are lost after edit on textarea

6 Answers6