06Abr 2010 34 Comments */?>

Acentos y caracteres especiales con Ajax y JQuery II parte

Categorías: JQuery - Tags: ,

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:

1
2
3
4
5
6
 
$.ajaxSetup({
'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

1
2
3
4
5
6
7
8
9
10
$.ajaxSetup({
'beforeSend' : function(xhr) {
try{
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
catch(e){
 
 
}
}});

Y luego hay que agregar en nuestro archivo PHP

1
<?php header( 'Content-type: text/html; charset=iso-8859-1' );?>

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.

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Ignacio Gallego Sagastume

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

  • Ignacio Gallego Saga

    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)

  • Ignacio Gallego Saga

    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

  • Ignacio Gallego Saga

    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

  • Ignacio Gallego Saga

    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

  • Ignacio Gallego Saga

    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

  • Ignacio Gallego Saga

    (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!!

    • Segundo

      Hola. Gracias por la información y el tiempo. La solución que plantean me ha resuleto el problema de codificación de caracteres en todos los exploradores dignos… mas no en el caso del IE. Estoy usando una combinación de lenguajes que no me permite incluir en el texto cargado ni PHP, ni ASP. Despúes de días de trabajo perdido por culpa del IE no logro codificar correctamente la respuesta obtenida. ¿Alguien tiene alguna pista nueva?
      Segundo
      Rosario – Santa Fe

    • Alber Tico

      Hola, justamente lo que faltaba para mi APP en Borland C++
      Gracias

  • Carlos Jimenez

    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)

  • Gonza

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

  • jabbo

    excelente solucion grax!!

  • Hinot

    Muchas Gracias por este Post, me soluciono semanas de trabajo =).

  • Excelente man, me la pase buscando por todos lados. Gracias!

  • Hector Garcia

    Esta es la solucion para los que trabajan JSP

    utf8 = valorCampo.getBytes("ISO8859_1"); //

    valorCampo = new String(utf8, "UTF-8");

    • Muchas gracias por tu aporte!

    • Facundo

      Tengo el problema que me guarda mal los caracteres especiales. Probe con lo que dice el tutorial y no puedo hacerlo andar con IE, en FF anda bien. Estoy con JSP y la funcion getBytes("ISO8859_1") me da error.
      Ademas, la funcion utf8_encode(String $string) para PHP que dijo Jose no la pude encontrar para JS.

      Espero que alguien me pueda ayudar.
      Saludos

  • Pingback: Acentos y caracteres especiales con Ajax y JQuery()

  • Diego

    Damián:
    Muchas gracias por la información que compartís con nosotros.Un saludo desde Bahía Blanca, Argentina

    Diego

  • Tengo este problema de los Acentos en mi WordPress.. por un theme que cambie…
    la pregunta es ¿En WordPress que archivo debo Modificar ?
    para no tener problema con los caracteres Especiales..

  • Fabian

    Nada de lo que se escribió sirvió !!!!!!!… la solución si es que ocupan PHP es solo colocar utf8_decode($string) en el archivo que procesa los datos enviados con AJAX…listo

  • Son unos capooooossssssssssssssssssssssssssssssssssss me funciono de maravilla!!!!!!!
    usado en este proyecto http://www.cooperativaelmate.com.ar/temp/elmate (en construcción, proximamente en la carpeta raiz)

    Saludos colegas.

  • Hola, tengo este problema:
    Luego de aplicar en el jquery y en la página al cargarla me aparece la siguiente leyenda alquien me puede ayudar? gracias

    Warning: Cannot modify header information – headers already sent by (output started at /home/usuarios_http/datovirtual/public_html/

  • Alex

    UPDATE II:
    Ignacio comenta que para ASP habria que usar el metodo :
    Response.ContentType=”text/html; charset=iso-8859-1?

    Solución inmediata al trabajar con ajax … en ASP. Tks!

  • Martin

    En qué momento se debe ingresar el $.ajaxSetup ?
    Yo por ejemplo dentro de mi página estoy haciendo un load() para que un php cargue en un div de la forma:
    $('#div').load('xxxx.php');

    De que forma pongo este ajaxSetup?
    Muchas gracias!

  • lo pones antes de hacer el load. me imagino que tu javascript lo estas cargando en el header.
    Pues ahi mismo!
    Saludos!

  • alejandro sauret

    Hola a todos, he probado con la solucion del update, y sigue sin funcionar en ie, , tengo mi pagina donde mando a hablar con la codificacion iso-8859-1, y la pagina que hablo con el load esta en php, ya puse el header en el php y en la codificacion de la pagina que cargo tambien le puse iso-8859-1, pero solo sigue sin funcionar en IE….
    Algo hice mal?

  • Sergi Tomé

    Me acabas de salvar la vida

  • Jasso

    Quiero comentar que para aquellos que especificamenteutilizan java (Struts) para pasar la cadena en jquery para mostrar algun texto o registros , unicamente en el responce colocan el siguiente codigo para solucionar este problema …

    response.setContentType("application/octet-stream");
    response.setContentType("text; charset=iso-8859-1");
    java.io.PrintWriter pw = response.getWriter();
    pw.write(Tus datos);
    pw.flush();
    pw.close();

    Saludos!!!!

    Agradezco a todos ya que me llevaron de alguna forma a mi solucion de mi escenario …

  • Jonathan A. Quiñones Dávalos

    muchisimas gracias!!! me funcionó de maravilla!!! 😀