Search code examples
jqueryhtmlcharacter-encodingdiacritics

Charset changes in nested html

I load an HTML file using jQuery.load(test.html). But when I do, the charset changes from UTF-8 to something that doesn't know umlauts (ä,ö,ü). Text in the root HTML file appears to be displayed correctly.

My header in the root html-file is:

<html lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Hotspot Nöttingen</title>
    <meta name="description" content="Alle Termine, Berichte und Aktuelles vom Hotspot" />
    <meta name="keywords" content="just, some, keywords" />
    <meta name="language" content="de" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link rel="stylesheet" type="text/css" media="(max-width: 500px)" href="css/mobile.css" />
    <link rel="stylesheet" type="text/css" media="(min-width: 500px)" href="css/style.css"  />

    <script type="text/javascript" src="js/jquery.js"></script>     
    <script type="text/javascript" src="js/script.js"></script>

</head>

The child html-file starts with:

<html lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="de" />       
</head>

EDIT: I am now using $.ajaxSetup() to set the charset before loading:

// Load site
$.ajaxSetup({
    "beforeSend" : function(xhr) {
        xhr.overrideMimeType("text/html; charset=UTF-8");
    },
});
$("#load_container").load(site, function() {
    $(".pending").hide();
});

This is what I get: The navigation bar is displayed correctly. The content is not.

Solution

  • I finally figured out what the problem has been:

    I'd written the child HTML using Notepad++ with ANSI. But the root HTML was written in UTF-8. So the problem was the editor setting.