Acentos y caracteres especiales con Ajax y JQuery II parte
Publicado en April 6, 2010 by Damian
Hace un tiempo escribí un post acerca de los acentos y caracteres especiales con AJAX y JQuery que explicaba como salvar este problema en los formularios enviados por AJAX.
El problema es que esta solución no abarca cuando con JQuery hacemos un .load() de información con AJAX y para variar nos salen cuadraditos o rombos negros con un signo de interrogación adentro. con caracteres como á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü, etc
Para salvar esto tan solo tenemos que configurar JQuery.ajax() de la siguiente forma:
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
});
Con esa opción forzamos que el encabezado de respuesta sea iso-8859-1 y no UTF-8.
UPDATE:
Este método solo funciona con FF ya que IE no soporta xhr.overrideMimeType como bien comento Ignacio en los comentarios. Una forma de solucionar esto es hacer lo siguiente:
Modificar el codigo inicial
'beforeSend' : function(xhr) {
try{
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
catch(e){
}
}});
Y luego hay que agregar en nuestro archivo PHP
Mandando el encabezado con PHP lograremos que funcione en IE. Un saludo , hagan pruebas y comenten que yo no tuve mucho tiempo.
UPDATE II:
Ignacio comenta que para ASP habria que usar el metodo :
Response.ContentType=”text/html; charset=iso-8859-1?
Un saludo espero que les haya servido de ayuda.
Con tu lector preferido.
Via Email.
Por Twitter.
Te agradezco infinitamente el dato de la configuracion de ajaxSetup “beforeSend”. Estuve varios dias con un problema con los acentos en jquery, y no era solo estetico, sino funcional, porque al parecer algún acento en la “o” combinado con alguna otra secuencia de caracteres hacia que el request ajax fallara y no me trajera ningun resultado.
Ignacio (La Plata, Argentina).
Ni bien postee mi anterior comentario, me di cuenta que en IE me da un error (el mismo que antes): "El objeto no admite esa propiedad o metodo" (Error: Object doesn't support this property or method). Me ilusione porque en Chrome y en Firefox si funcionaba.
Alguien me dice como solucionar esto en IE? El problema es el metodo overrideMimeType.
Muchas gracias!
Ignacio (La Plata, Argentina)
He aqui la solucion (si alguien tiene una mejor, por favor compartir):
$.ajaxSetup({'beforeSend' : function(xhr) {
try {
//FF & Chrome
xhr.overrideMimeType('text/html; charset=iso-8859-1');
} catch (e) {
//IE8
xhr.setRequestHeader("contentType","text/html; charset=iso-8859-1");
}
}//end function
});//ajaxSetup
Saludos!
Ignacio
Dejo ya de postear: si bien no da el error en IE de object doesn't support this property or method, tampoco me trae los datos de la base de datos con acentos y para uno de los casos, se cuelga y no trae nada…
Gracias por tu aportación. Prueba ahora si funciona y haceme saber por favor. Saludos
Damian,
en el codigo que publicaste, para el caso IE8, no entiendo que haria, porque el objeto instanciado con "new" no se asigna a ninguna variable, ni se le manda ningun mensaje.
Intente con esto:
______________________________________
$.ajaxSetup({'beforeSend' : function(xhr) {
if (xhr.overrideMimeType) {
//FF & Chrome
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}else {
//IE8
//xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
xhr.setRequestHeader('Content-Type', 'text/html; charset=iso-8859-1');
}
}
});
______________________________________
pero tampoco me funciono. Cabe aclarar que estoy trabajando con $.getJSON() y ASP.
Saludos!
Ignacio
Ahora si, posteo la solución definitiva que le dimos en nuestro trabajo (me llevo varios dias). Era tan simple como la solucion que dio Damian para PHP. En ASP, lo del header, se dice asi:
En la primer linea del archivo que genera los objetos JSON.
El problema era de concepto: el que debe especificar que codificacion se usa para la respuesta es el servidor, no el javascript que hace el requerimiento (cliente).
Espero que sirva. Saludos!
Ignacio
(Va de nuevo porque no se vio el codigo.)
Ahora si, posteo la solución definitiva que le dimos en nuestro trabajo (me llevo varios dias). Era tan simple como la solucion que dio Damian para PHP. En ASP, lo del header, se dice asi:
Response.ContentType="text/html; charset=iso-8859-1"
En la primer linea del archivo que genera los objetos JSON.
El problema era de concepto: el que debe especificar que codificacion se usa para la respuesta es el servidor, no el javascript que hace el requerimiento (cliente).
Espero que sirva. Saludos!
Ignacio
Gracias por tu aporte ignacio!!
Muy buenas.
Os agradezco las soluciones que dais, son bastante útiles.
No obstante, quería preguntaros por mi problema en particular. Yo hago un $.load() con jquery y me traigo una página estática (impuesto por la arquitectura), es decir, no uso lenguajes como php o asp para devolver la información.
En este caso, ¿es posible solucionar el problema este de los caracteres "raros"?
Muchas gracias.
Pero carlos, esa página estática, la podes editar? No tenes que usar PHP en tu página, sino solo añadir la sentencia al principio de todo , antes de cualquier otro caracter HTML (incluido espacios en blanco). Saludos
Pues, una forma fácil de solucionar este problema es también modificando el archivo .php que envía los datos, debemos enviar la cadena codificada en utf-8, con la siguiente función:
utf8_encode(String $string)
Excelente post !! Me resolvio al instante el problema !!
Estuve probando varias cosas para obviamente para el caso particular de IE que siempre anda insoportablemente mal para todo.
(En este caso la version 7).
A mi me funcionó poniendo en el PHP que llamo desde AJAX via GET, en el head:
Hago el comentario para que nadie pierda tiempo como yo lo hice. Ojala hubiera encontrado esto antes.
Gracias gente!
Saludos, Gonza.-
excelente solucion grax!!
Muchas Gracias por este Post, me soluciono semanas de trabajo =).
Excelente man, me la pase buscando por todos lados. Gracias!