Jeditable inserts extra spaces around the text in text area

Question

Jeditable is inserting extra spaces around the actual text in a text area for me when I click to edit some text. How do I trim this or actually fix this?

Answer 1

You can actually just pass a function to trim the string you are going to edit. Use this in your settings:

data    : function(string) {return $.trim(string)},
submit: "Save"

Answer 2

Found the reason. And it is insane!

In place edit will insert space around the text if you html looks like following

<div id="inplace_edit_this">
     This is some text that will be edited in-place.
</div>

And it will NOT insert space around the text if your html looks like this

<div id="inplace_edit_this">This is some text that will be edited in-place.</div>

I wonder what causes this. This is probably because of the difference in the ways the browser and Javascript interpret the HTML.

Answer 3

This might be old news, but I was faced with as similar problem: I don't know why yet, but after saving an edited text input, the next time I clicked on it, 11 spaces (every time) were inserted before the editable text.

After lots of trial and error, I finally solved this problem by editing the line ~239 in the jeditable.js file:

content.apply(form, [input_content, settings, self]);

and replaced it with:

content.apply(form, [$.trim(input_content), settings, self]);

(Per Baloneysammitch's suggestion)

Note that I have pretty much no idea what I'm doing, but this seemed to work! Maybe someone with more skill than me could explain where those extra 11 spaces might be coming from...

Answer 4

I have fixed this problem with JEditable 1.7.1 in my application. The solution is practically identital to that of Symmitchry.

Starting from row 204 there is a code-block that determines how JEditable should load its data.

/* set input content via POST, GET, given data or existing value */
var input_content;

if (settings.loadurl) {
  ...
} else if (settings.data) {
  ...
} else {
  ...
}
content.apply(form, [input_content, settings, self]);

Add jQuery trim-function before the last row (row 239 in my version)) so you get:

/* set input content via POST, GET, given data or existing value */
var input_content;

if (settings.loadurl) {
  ...
} else if (settings.data) {
  ...
} else {
  ...
}

try {
    input_content = input_content.trim();
}
catch(e) {
    // DO NOTHING
}

content.apply(form, [input_content, settings, self]);

The reason why I put it in a try-catch is because when you use JEditable with textarea or input of type text input_content is basically a string. When you use a select input_content is an object, and will not respond well to being trimmed.

There is probably a more beautiful way of doing this, rather than using a try-catch, but it gets the job done.