JavaScript, jQuery, AJAX and accented characters: how to get them working?

Question

I'm experiencing a problem with the display of accented characters via AJAX and jQuery. I'll explain it in more detail.

I have a page where it has an input field. When I fill that field with 4 characters (which must be an ICAO code for an airport), it calls a PHP script via AJAX. The script is the following:

File: ajax.airport.php

<?php
    include("mysqlexec.inc.php");
    include("functions.inc.php");

    if(isset($_GET['icao'])){ 
        $airportData = GetAirportInfo($_GET['icao']);  

        if (!empty($airportData["Name"])) {
            echo $airportData["Name"];
        } else {
            echo "Not found!";
        }
    }
?>

The function GetAirportInfo(); makes a HTTP request to the Our Airports website, where the airport's name is displayed. If you can check this example page, you may note that the ICAO code is SBGL, which was entered by the user on the input and the return of the GetAirportInfo(); function (which is the element of an array) will be Galeão - Antônio Carlos Jobim Intl, with some accented characters.

The problem is, when echoing this on the file, there appears Gale�o - Ant�nio Carlos Jobim Intl instead.

All files are UTF-8 (without BOM). I tried several functions (PHP and JS types), but that proved to be unsuccessful.

The jQuery function executed on the input is this:

function showAirport(icao, dest) {
    var icao=icao.toUpperCase();

    if (icao.length < 4) {
       $("#"+dest).html("");
    } else {
       $("#"+dest).html('<img src="images/loadingsm.gif"/>');
       $.ajax({
           type    : "GET",
           url     : "ajax.airport.php",
           dataType: "html",
           data    : { icao: icao },
           success : function (result) {
               $("#"+dest).html(result);
           },
       });
    }
};

Any help is welcome.

how about database ? are records encoding correct ? by the way, at example page, encoding seems correct to me (mac os, chrome) — tanaydin, Apr 12 '13 at 14:34
Actually those data are not being recorded on any database. The intention is to be displayed only for the user crosscheck and realizing that he entered the right ICAO code. - Example page is not mine, it's from Our Airports site, from where I take the information. Our Airports is not maintained by me: it's just from where I extract the data, with their permission. — Filipe Fonseca, Apr 12 '13 at 14:37
did you tried [mb_detect_encoding](http://php.net/mb_detect_encoding) ? or you can try like echo utf8_encode($airportData["Name"]); — tanaydin, Apr 12 '13 at 14:40
are you printing these on an html page? if yes, check that you have a meta tag with charset="utf-8" specified. I'd also try charset="iso-8859-15", if utf-8 doesn't work for you. — STT LCU, Apr 12 '13 at 15:03
My `meta` tag is ``. I'm studying the `mb_detect_encoding` function. — Filipe Fonseca, Apr 12 '13 at 15:05
@tanaydin, the usage of `utf8_decode` did the trick! I had a wrong understanding of the function, but you quote made me review it correctly. Thank you very much! — Filipe Fonseca, Apr 12 '13 at 15:15

score 0 · Answer 1 · answered Apr 12 '13 at 15:06

have check contentType attribute

function showAirport(icao, dest) {
var icao=icao.toUpperCase();

if (icao.length < 4) {
   $("#"+dest).html("");
} else {
   $("#"+dest).html('<img src="images/loadingsm.gif"/>');
   $.ajax({
       type    : "GET",
       contentType: "text/xml;charset=utf-8",
       url     : "ajax.airport.php",
       dataType: "html",
       data    : { icao: icao },
       success : function (result) {
           $("#"+dest).html(result);
       },
   });
}

};

That charset on `contentType` is already the default [according to the jQuery's API](http://api.jquery.com/jQuery.ajax/). — Filipe Fonseca, Apr 12 '13 at 15:09

score 0 · Answer 2 · edited Apr 12 '13 at 15:16

I think you should encode $airportData["Name"] before it echoes in ajax.airport.php, use json_encode() before the data echo by ajax. Some other language need encode that the browser can identify

include("mysqlexec.inc.php");
include("functions.inc.php");

if(isset($_GET['icao'])){ 
    $airportData = GetAirportInfo($_GET['icao']);  

    if (!empty($airportData["Name"])) {
        echo json_encode($airportData["Name"]);
    } else {
        echo "Not found!";
    }
}

JavaScript, jQuery, AJAX and accented characters: how to get them working?

2 Answers2