Jeditable inserts extra spaces around text in text area

Question

Jeditable inserts extra spaces around the actual text in the text area for me when I click to edit the text. How do I crop it or really fix it?

Answer 1

In fact, you can simply pass in a function to trim the line you are about to edit. Use this in your settings:

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

Answer 2

Found a reason. And this is crazy!

On-site editing will insert a space around the text if the HTML looks like this

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

And this will NOT insert a 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> 

Interestingly, because of this. This is probably due to the difference in how the browser and Javascript interpret HTML.

Answer 3

This may be old news, but I encountered a similar problem: I do not know why, but after saving the edited text input, the next time I clicked on it, 11 spaces were inserted (each time) in front of the edited text.

After many 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]); 

(At the suggestion of Baloneisammahti)

Please note that I almost don't know what I'm doing, but it seems to have worked! Maybe someone with more skill than I could explain where those extra 11 spaces might appear ...

Answer 4

I fixed this problem with JEditable 1.7.1 in my application. The solution is almost identical to the Symmitch solution.

Starting at line 204, there is a block of code that defines 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 line (line 239 in my version) so that 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 I put it in try-catch is because when you use JEditable with textarea or text input like input_content, it is basically a string. When you use select input_content, it is an object and will not respond well to cropping.

There is probably a nicer way to do this, instead of using try-catch, but it does its job.

Answer 5

Hmm, this is weird. I do not get this problem with Jeditable.

Ok, jQuery has a trim function:

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

Answer 6

Some time has passed since someone answered this post, but I ran into the same problem and thought I would add my two cents. This problem arose only for me in firefox and safari. IE and chrome don't seem to have this problem.

I tried Symmitchry's $.trim() on line 239 and this did not work for me. Therefore, I made a digression and realized that the problem first appears around line 176 with a line:

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

Since this is a jquery call, I am wondering if there is a problem with jquery interacting with the above browsers. Not sure...

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

I found how Chirantan did the way the html was built, changed whether there were spaces or not.

Answer 7

This happens if formatting has spaces. jEditable respects it and does not modify your content. For example, in the automatic VS IDE format, massive spaces are created in which the HTML correction is in order.

IF using jQuery just truncates the DOM before calling jEditable, if you want to make sure there is no space in it.

 $('#BatchTable tbody td').each(function () { $(this).html($.trim($(this).html())); }); oTable = $('#BatchTable').dataTable({ "bJQueryUI": true }); 

Answer 8

In my case, the solution was to delete </input> on line 390 in the jquery.jeditable.js file. Line up to: var input = $('<input type="hidden"></input>'); The line that works for me: var input = $('<input type="hidden">');