jQuery $.get() charset of reply when no header is set?

Question

Hi, I just recently installed Winamp Song Requester wich is a Winamp web song requester plugin with a built in minimal HTTP CGI Server.

What the plugin does is that it runs a web server, serves a html page with some special variables wich it replaces with actual data on request (playlist, request queue, time left in song etc).

I saw this as a fun and good project to learn some jQuery so I started hooking up my own js code to replace, fix and ajaxify the served website from the plugin but I've now run into a problem with character encoding.

On the page you get links to all songs in the playlist. When you click on one of the links I hooked up my own jQuery click function. So instead of reloading the whole page when you request a song I do a $.get($(this).attr('href', function(response) {... code ...}) and then I use replaceWith to replace the current queue with the new generated queue with your request added on the fly. I do the same thing to show/update currently playing and on search so that everything get fetched in the background and then replaced on the fly with some animations added.

All jQuery/Ajax works great but the big problem I have is with charset and with song names in queue/playlist. Special characters (åäöé etc.) in names doesn't work at all.

The plugin outputs everything in iso-8859-1/latin1 and my meta tag in the markup tells the browser that this page is latin1. On a normal page refresh in the browser this works well and the special characters display as normal. But when I use jQuery and $.get() to replace blocks of code on the fly the special characters only show up as ?.

I think that the problem lies in that jQuery defaults to believe that the $.get() response is UTF-8 if no header says otherwise. The plugin doesn't set any header for encoding/charset at all and since I have no control at all of the backend and what headers get set I can't change this.

The only headers I get in the response from the plugin is:

Server: WinampServer
Connection: close
Content-Type: text/html

I hope you understand my problem. I've got a page where I have no control at all over the backend and all I have to work with is generated HTML. I can't change or add headers in responses. I need to tell jQuery that the response is actually in latin1 and not UTF-8 so that the encoding of special characters don't break. I've tried the scriptCharset: 'iso-8859-1' in jQuerys ajaxSetup but that only works with type script/json and I'm working with HTML responses.

Any idea if this is possible or any other workaround you could think about?

Answer 1

edit: ok i think this works (at least it worked in my test environment, see revisions for previous attempt)

$.ajaxSetup({
    'beforeSend' : function(xhr) {
        xhr.overrideMimeType('text/html; charset=UTF-8');
    },
});
$('#stuff').load('/yourresource.file'); // your ajax load

what i had was the main file set in UTF-8 and the data file set in ISO-8859-1. without the above code, i got a bunch of garbage for the test string åäöé, as expected. with the above code, it loaded åäöé properly encoded.

Answer 2

At first, it would be better if you've used the more general $.ajax() function.

According to the documentation there is the scriptCharset option, however it is only applicable in certain data types. It is also stated that this is necessary only if the encoding of the calling page is different.

Answer 3

This is just to point out that while the overrideMimeType() method is available in Gecko-based browsers (Firefox, ...), it is NOT in IE (at least <=7), and there appears to be no workaround. (I don't know about availability in other browsers.)

Answer 4

Is there a solution now in new jQuery or a workaround ?
'overrideMimeType' doesn't work in IE6 and make scripts fail

Thanks