UTF8 encoding not working when using ajax.

Posted by Ronedog on Stack Overflow See other posts from Stack Overflow or by Ronedog
Published on 2010-05-20T21:07:12Z Indexed on 2010/05/20 21:10 UTC
Read the original article Hit count: 497

Filed under:
|
|

I recently changed some of my pages to be displayed via ajax and I am having some confusion as to why the utf8 encoding is now displaying a question mark inside of a box, whereas before it wasn't.

Fore example. The oringal page was index.php. charset was explicitly set to utf8 and is in the <head>. I then used php to query the database

Heres is the original index.php page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Title here</title>
</head>
<body class='body_bgcolor'  >

<div id="main_container">
    <?php 
        Data displayed via php was simply a select statement that output the HTML.  
    ?>
</div>

However, when I made the change to add a menu that populated the "main_container" via ajax all the utf8 encoding stopped working. Here's the new code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Title here</title>
    </head>
    <body class='body_bgcolor'  >
<a href="#" onclick="display_html('about_us');"> About Us </a>

    <div id="main_container"></div>

The "display_html()" function calls the javascript page which uses jquery ajax call to retrieve the html stored inside a php page, then places the html inside the div with an id of "main_container". I'm setting the charset in jquery to be utf8 like:

$.ajax({
        async: false,
        type: "GET", 
        url: url, 
        contentType: "charset=utf-8", 
        success: function(data)
            { 
                $("#main_container").html(data);
            }
});

What am I doing wrong?

© Stack Overflow or respective owner

Related posts about AJAX

Related posts about jquery-ajax