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?

Kelpie

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"

Octans

Awesome. This is really useful. – Fotinas

Seriously. I added this to my base object that I build all of my jeditable objects off of, and now I can format my page however I want. Really useful... – Fotinas

This should be marked the correct answer... this is the right way to handle the situation! Thank you! – Jig

Really, it's awesome answer (y). You saved me friend ;) – Strahan

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.

Kelpie

... not fixed root cause of issue, Symmitchry's proposal fixed well – Tollefson

...but this is the answer if you won't, or can't, change jEditable.js – Hama

I agree with dmytrivv. Question never specified that jEditable can't be changed. I tried the solution above, and I still get a space in the beginning. Johan Bjorling and Symmitchry's solutions work all the time. – Kierkegaard

This is definitely the correct answer. Though, I kind of wish jeditable would adopt using trim in the core... I am not going to edit the core when I can simply fix my page. – Fotinas

Greg DeVore's method allows for a universal fix without editing the jeditable files. https://mcmap.net/q/1389323/-jeditable-inserts-extra-spaces-around-the-text-in-text-area – Fotinas

Fixed my problem thanks. – Thyme

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

Tankoos

Thanks, this fixed the same problem for me! In case you (or anyone else) runs into this same problem with the pre-edit text found in self.revert, I made the same change to line 260 or so, $.trim()ing the value that self.revert is set to, and that fixed my original-value whitespace issue. – Urtication

You should really use Greg DeVore's method: https://mcmap.net/q/1389323/-jeditable-inserts-extra-spaces-around-the-text-in-text-area No updating the jeditable core file. – Fotinas

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.

Cither

Answer 5

Hmm, that's strange. I'm not getting that problem with Jeditable.

Oh well, jQuery has a trim function:

$.trim("  hello, how are you?  ");

Amery

Answer 6

It's been a while since anyone answered to this post but I ran into the same problem and thought I'd add my two cents worth. This issue only occurred for me in firefox and safari. IE and chrome do not seem to have this problem.

I tried Symmitchry's suggestion of the $.trim() at line 239 and this did not work for me. So I did some backtracking and figured out that the issue is first appearing around line 176 with the line:

self.revert = $(self).html();

Since this is a jquery call, it makes me wonder if there is an issue with how jquery is interacting with the above mentioned browsers. Not sure...

I found that by adding a $.trim() at this point things worked as expected for me.

I did find as Chirantan did that how the html was laid out made a difference in if the spaces were there or not.

Systematics

Answer 7

This does happen if the formatting has allot of spaces. jEditable treats it with respect and does not modify your content.. for example in VS IDE auto format creates massive gaps in which rendereing HTML is fine.

IF using jQuery just trim the DOM before calling jEditable if you want ot make sure the is no whitespace anywhere

$('#BatchTable tbody td').each(function () {
      $(this).html($.trim($(this).html()));
});

oTable = $('#BatchTable').dataTable({
        "bJQueryUI": true
});

Panegyrize

Answer 8

In my case the solution was to remove the </input> in Line 390 in file jquery.jeditable.js. Line before: var input = $('<input type="hidden"></input>'); Line which works for me: var input = $('<input type="hidden">');

Uncharitable