jQuery AJAX Character Encoding

Viewed 349970

I'm currently coding a French website. There's a schedule page, where a link on the side can be used to load another day's schedule.

Here's the JS I'm using to do this:

    <script type="text/javascript">
    function load(y) {
        $.get(y,function(d) {
            $("#replace").html(d);
            mod();
        });
    }
    function mod() {
        $("#dates a").click(function() {
            y = $(this).attr("href");
            load(y);
            return false;
        });
    }
    mod();
    </script>

The actual AJAX works like a charm. My problem lies with the response to the request.

Because it is a French website, there are many accented letters. I'm using the ISO-8859-15 charset for that very reason. However, in the response to my AJAX request, the accents are becoming ?'s because the character encoding seems to be changed back to UTF-8.

How do I avoid this? I've already tried adding some PHP at the top of the requested documents to set the character set:

<?php header('Content-Type: text/html; charset=ISO-8859-15'); ?>

But that doesn't seem to work either. Any thoughts?

Also, while any of you are looking here...why does the rightmost column seem to become smaller when a new page is loaded, causing the table to distort and each <li> within the <td> to wrap to the next line?

Cheers

23 Answers

Specifying the content type on the AJAX-call solved my problems on a Norwegian site.

$.ajax({
        data: parameters,
        type: "POST",
        url: ajax_url,
        timeout: 20000,
        contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",
        dataType: 'json',
        success: callback
});

You would also have to specify the charset on the server.

<?php header('Content-Type: text/html; charset=ISO-8859-15'); ?>

UTF-8 is supposed to handle all accents and foreign chars - why not use it on your data source?

EDIT
[Archive copy of the test file.] with your data

Everything should be UTF-8 in the first place. I loaded the files in notepad++, converted to utf-8 and manually changed the charactes to accents were needed. Once done everything's working like a charm.

BTW, unless your server is defined to php-process .html files, the files you're loading with ajax aren't getting your iso charset. If you insist on using the iso charset, request a php file instead of an html file, and define the charset in the header (not in the file itself)

$str=iconv("windows-1250","UTF-8",$str);

what helped me on the eventually

You need to set up your server to use ISO-8859-15 as the character encoding (adding the appropriate HTTP header). Doing it in the body of the html won't help.

I can see this line

<?php header('Content-Type: text/html; charset=ISO-8859-15'); ?>

at the source of your html. This shouldn't happen. Using Live HTTP Headers I can't see the appropriate charset HTTP header. Use that for both your first page and the ajax service.

For my PHP application the solution was include utf8_decode function for each variable get in $_POST.

Ex: (SERVER SIDE)

if( strtoupper($_SERVER['REQUEST_METHOD']) == "POST" ){
$variable = htmlentities($_POST['variable']); // wrong
$variable = htmlentities( utf8_decode($_POST['variable']) ); // right
}

Abraços!!! (Bye Bye!!!)

When printing out the variables in the ajax file. Put a

htmlentities()

Around them, see if it works. Worked for me in an Icelandic ajax application.

I DONT AGREE everything must be UTF-8, you can make it work perfectly with ISO 8859, I did, please read my response here.

my response in stackoverflow

I´ve had the same problem with pages that:

  • Show up fine when called normally
  • Have the special characters messed up when called via an ajax request

To solve the problem (using php), I used utf8_encode() or htmlentities() on the source data. Both worked, I have used them in different projects.

jQuery by default assumes UTF-8, to change this default do:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
  $.ajaxSettings.mimeType="*/*; charset=ISO-8859-15";// set you charset
</script>

This works fine for me!... ;))...

Related