UTF chars retrieved with AJAX are not shown in Safari

Question

Hi, I have problem rendering content retrieved via Ajax into my HTML page under Safari (v.4). The page is stored in UTF-8, Ajax response is also UTF-8 encoded.

The loaded content is parsed and then different types of lists are populated with the parsed data. One of them is simple < select > element where the text of the option is set using trivial code:

option.innerHTML = "";
option.appendChild(document.createTextNode(text));

My text contains french characters. As a result of the code above the < select > element shows option with this french text split in 2 parts, where the separator (some cool french letter) is not shown at all... :(

Using

option.innerHTML = escapeGtLtAmp(text);

has same result.

If the french content is set to innerHTML of some < div > then the text is shown not split but simply with non-english letters omitted.

Under Firefox 2 things seems to work fine.

Answer 1

The page is stored in UTF-8, Ajax response is also UTF-8 encoded.

Does the AJAX-response also have the Content-Type-HTTP-header set to UTF-8?

Answer 2

I had a similar issue with Firefox 3, and it seemed that the problem was the ajax call. I also tried changing the request headers but problem continued. So I tried loading the data from an iframe thereby avoiding ajax altogether, and then getting the iframe's innerHTML.

If you're using jquery, perhaps this little plugin could help you or just give you an idea