UTF8 encoding not working when using ajax

Question

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?

If you use PHPMyAdmin, click on the database in left column, then click "Operations". The last option is to change tables collation, set them to something like utf8_general_ci, not before making a good backup of all your data! — Heitor
– Heitor, Commented Oct 25, 2019 at 1:15

mdma · Accepted Answer · 2010-05-20 21:17:53Z

7

Encoding is more than specifying the meta tag and content type - the files themselves must really be in the encoding you specify, or you'll get mojibake.

Check that everything is using UTF-8, your database, database connection, table columns. Check that any static files you are including are also encoded in UTF-8.

answered May 20, 2010 at 21:17

mdma

57.9k12 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Ronedog Over a year ago

Ok, I changed all my files including all the includes from ANSI to UTF-8. I looked at the database, but not sure I'm looking in right spot. The columns say under "COLLATION" "Latin1_swedish_ci" Not sure what this means though. How else can I check if the db tables/columns is utf-8? Also, after I saved all the files to utf-8 I now get an error stating "Cannot send session cache limiter - headers already sent" but I didn't change any code other than saving the file as utf-8 and everything worked before I did this...not sure whats going on. Thanks for your help

mdma Over a year ago

Like the other comments are saying, this is to do with the byte order mark. See the other links from other posters, and also forum.mamboserver.com/showthread.php?t=42814

Ronedog Over a year ago

Ok, I've read all those other posts. Basically they are saying there is a space or new line character either before the <?php or after the ?> tag. I've gone through all my code and all the includes and still get the same result. I even removed out every bit of code from the index.php page so it looked like this: <?php session_start(); ?>...no spaces anywhere before or after...no includes of other files that could affect it When I reload the page, I get same error message. HOWEVER, I decided to resave the index.php page as ANSI, and the error went away, but the encoding was no good???

mdma Over a year ago

If you save index.php as UTF-8 and then open it up in a hex editor,you will see that there are indeed characters betore <?php - the byte order mark - it's metadata and not shown in notepad/wordpad, but php has trouble with it. Use an editor that can save UTF-8 without the BOM and the problem will go away.

Ronedog Over a year ago

Thanks for your help...any idea on an editor? All I've ever used is notepad, notepad2, dreamweaver, wordpad. will any of these work?

|

Oleg · Accepted Answer · 2010-05-20 21:29:47Z

You wrote

The "display_html()" function calls the javascript page which uses jquery ajax call to retrieve the html stored inside a php page

What do you mean with "the html stored inside a php page"? If you want to load data and display there as a contain of <div> the loaded data should be formated correspondent. I mean that it should be real a code fragment of HTML. Moreover Together with 'contentType' it would be a good idea to specify 'dataType' as "html" or "text". If you don't specity anything the last version of jQuery will "intelligently try to get the results, based on the MIME type of the response". If you know the 'dataType', it would be better to specify there. And if you use ajax use also default 'async: true' and not 'false'.

You should also verify whether jQuery.load method (see http://api.jquery.com/load/) is the best choice for you. You can load with the mathod a full html page if required and display only a part of there: $('#main_container').load('ajax/about_us.html #container');

And about UTF-8 encoding don't forget to save the file really UTF-8 encoded. Use corresponding option of your editor (in Notepad choose "Save As" and then choose as encoding "UTF-8" and not "ANSI").

Carlos M. Meyer · Accepted Answer · 2015-01-20 09:00:51Z

0

Make sure all your files are saved as UTF-8 (or UTF-8 w.o. BOM).

If you have uploaded them by FTP or with a web tool, check if they are still UTF-8.

answered Jan 20, 2015 at 9:00

Carlos M. Meyer

4463 silver badges9 bronze badges

Comments

Timur Gafforov · Accepted Answer · 2015-04-09 17:10:45Z

0

In my case neither of the solutions worked until I placed

header('Content-type: text/html; charset=utf-8');

answered Apr 9, 2015 at 17:10

Timur Gafforov

7723 gold badges11 silver badges31 bronze badges

Collectives™ on Stack Overflow

UTF8 encoding not working when using ajax

4 Answers 4

15 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

15 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related