Jeditable inserta espacios adicionales alrededor del texto en el área de texto

Question

Jeditable está insertando espacios adicionales alrededor del texto real en un área de texto cuando hago clic para editar texto. ¿Cómo recorto esto o realmente arreglo esto?

Answer 1

En realidad, puede pasar una función para recortar la cadena que va a editar. Utilizar esto en su configuración:

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

Answer 2

Hmm, eso es extraño. No estoy teniendo ese problema con Jeditable.

Bueno, jQuery tiene una función de ajuste:

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

Answer 3

encontrado la razón. ¡Y es una locura!

En lugar de edición se inserte el espacio alrededor del texto si html se ve como después de

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

Y lo hará NO espacio de inserción en todo el texto si su html tiene este aspecto

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

Me pregunto qué causa esto. Esto es probablemente debido a la diferencia en las formas en que el navegador y Javascript interpretan el HTML.

Answer 4

Esto podría ser una noticia antigua, pero me enfrenté a un problema similar: todavía no sé por qué, pero después de guardar un texto editado, la siguiente vez que hice clic en él, 11 espacios (cada vez) insertado antes del texto editable.

Después de mucho ensayo y error, finalmente resuelto este problema mediante la edición de la línea de ~ 239 en el archivo jeditable.js:

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

y lo reemplazó con:

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

(Per sugerencia de Baloneysammitch)

Ten en cuenta que no tengo ni idea de lo que estoy haciendo, pero parece que funcionó. Tal vez alguien con más habilidad que yo podría explicar de dónde podrían venir esos 11 espacios extra ...

Answer 5

Ha pasado un tiempo desde que alguien respondió a esta publicación, pero me encontré con el mismo problema y pensé en agregar mis dos centavos vale la pena. Este problema solo ocurrió para mí en Firefox y Safari. IE y Chrome no parecen tener este problema.

Probé la sugerencia de Symmitchry del $.trim() en la línea 239 y esto no funcionó para mí. Así que hice una vuelta hacia atrás y la cuenta de que el problema está apareciendo por primera vez alrededor de la línea 176 con la línea:

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

Dado que esta es una llamada jQuery, que me hace pensar que hay un problema con la forma en jQuery es interactuando con los navegadores mencionados anteriormente. No estoy seguro ...

Encontré que al agregar un $.trim() en este punto las cosas funcionaron como esperaba.

Encontré que Chirantan hizo que la forma en que se presentaba el htm hiciera una diferencia en si los espacios estaban allí o no.

Answer 6

He solucionado este problema con JEditable 1.7.1 en mi aplicación.La solución es prácticamente idéntica a la de Symmitchry.

A partir de la fila 204 hay un bloque de código que determina cómo JEditable debe cargar sus datos.

/* 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]); 

Añadir jQuery ajuste del funcionamiento antes de la última fila (fila 239 en mi versión)) por lo que se obtiene:

/* 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]); 

La razón por la que lo puse en un try-catch es porque cuando se usa JEditable con textarea o entrada de tipo texto input_content es básicamente una cadena. Cuando usa un contenido de entrada de selección, es un objeto y no responderá bien al recorte.

Probablemente haya una forma más hermosa de hacer esto, en lugar de usar un try-catch, pero hace el trabajo bien.

Answer 7

Esto sucede si el formato ha adjudicar los espacios. jEditable lo trata con respeto y no modifica su contenido ... por ejemplo, en el formato automático VS IDE se crean enormes lagunas en las que el renderizado de HTML está bien.

SI usando jQuery simplemente recortar el DOM antes de llamar jEditable si desea ot asegurarse de que la hay espacios en blanco en cualquier lugar

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

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

Answer 8

En mi caso, la solución fue eliminar la </input> en la línea 390 en el archivo jQuery. jeditable.js. línea antes: var input = $('<input type="hidden"></input>'); línea que funciona para mí: var input = $('<input type="hidden">');