Jeditable inserts extra spaces around the text in text area_问答_开发者

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

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"

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.

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

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.

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

Oh well, jQuery has a trim function:

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

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.

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
});

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">');