Loaded content loses charset(UTF-8) after Ajax .load(), but only in FireFox and IE. Chrome and Opera works fine

Question

I have searched the web for days now and I can't seem to find a working solution. The problem is that I'm trying to load some data from another page on my domain. This page has the charset ISO-8859-1. Which UTF-8 should be compatible with. I tested in Chrome first and it worked fine, but when I test in FireFox it doesn't work with the charset. I'm loading some category names into a list to use in a submenu. As shown in the picture it is only the submenu that has the problem. https://i.stack.imgur.com/es81s.jpg

The ajax code, that I use to load the content with is here:

var catz = subCats[i].url + " .productSubCategorys a";
var fordiv = '#ghostDiv' + i;
//This next line is the function
    $(fordiv).load(catz, {contentType: "application/x-www-form-urlencoded;charset=UTF-8"}, function(){
        var fordiva = fordiv + " a";
        $(fordiva).removeClass("SubCats_Prodlink");
        var arraydims = $(fordiva);
        var d = '.0c' + i;
        if(arraydims.length != 0){
            var di = '#dcu' + i;
            $(d).append('<ul class="dc' + i + ' sub-level" id="dcu' + i + '"></ul>');
            $(di).append('<div id="sscont' + i + '"></div>');
            for(var index = 0; index < arraydims.length;index++){
                var dc = '#sscont' + i; //'.dc' + i;
                $(dc).append('<li><a href="' + arraydims[index] + '">' + decodeURIComponent(encodeURIComponent(arraydims[index].text)) + '</a></li>');
            }
        }       
    });

I have tried to pass a parameter for the header with the charset, but it doesn't work. Why is it that the ajax function removes the charset and how can I fix it? Hope that I have provided enough information.

score 3 · Accepted Answer · edited May 23 '17 at 11:52

I found the answer just a few hours after putting the question up. That is how it works all the time. When you give up, you could be very close to the answer.

Anyways .. the answer was found here: Convert ISO-8859-1 to UTF-8

and what worked is this:

//This setup makes sure that the header is correct
    $.ajaxSetup({
        contentType: 'Content-type: text/plain; charset=iso-8859-1',
        // This is the imporant part!!!
        beforeSend: function(jqXHR) {
            jqXHR.overrideMimeType('text/html;charset=iso-8859-1');
        }
    });

Put right before the .load function.

Loaded content loses charset(UTF-8) after Ajax .load(), but only in FireFox and IE. Chrome and Opera works fine

1 Answers1