JQuery load() and national letters(like ę,ą,ć)

Question

I'm using JQuery load() method to load content to page. The only problem is, when content is loaded via load() method all national(polish) chars are displaying invalid... On both pages loaded and main(in which content is load) coding is set to iso-8859-2(yeah, I know, I should use utf-8 bo it doesn't help in this case).

I don't really know how to solve it. The only solution I though of is replacing special chars with some code before loaded and after receiving data decoding it, but it's kind of complicated:D

Any ideas?

Cheers

Answer 1

Ok, I did some research. And this is what I found:

jQuery .load() does not look into HTML meta tag for content-type. You can choose one of two options:

1. To set HTTP response headers to Content-type: text/html; charset=iso-8859-2 and then use jQuery .load(). For instance in PHP you can do it by putting this at the top of the page:

   <?php header('Content-type: text/html; charset=iso-8859-2'); ?>

2. To override HTTP response content type on client side using jQuery. For this purpose you should pass the setting mimeType: "text/html; charset=iso-8859-2" to $.ajax(). You can't do this using .load() because it does not support the ability to set ajax settings.

Both options tested, so everything should work! :)

Answer 2

Assuming your chosen character set (ISO-8859-2) can actually represent the characters you want to use, it sounds like there's a problem with the file not being served from the server with the correct character set ('charset').

If you are using load() to request an HTML file, the charset parameter for HTML files can either be set by the Content-Type header in the response, or included as a meta tag in the HTML content.

Exactly how you set the Content-Type header depends on how you're generating or serving the HTML. The W3C has a good document that describes how to do it in several web servers and programming languages:

http://www.w3.org/International/O-HTTP-charset

Setting the charset meta tag might prove easier. The exact syntax differs between different versions of HTML, and you can find some information here:

http://en.wikipedia.org/wiki/Character_encodings_in_HTML#Specifying_the_document.27s_character_encoding

As several commenters suggested, if you want to maximise support for different languages in your website, it's also a good idea to consider moving towards a Unicode encoding like UTF-8, which minimises the chance of these incompatibilities occuring.

Answer 3

Is it all polish? If not, you could try HTML entities for those characters, browser will do the decoding.

http://en.wikipedia.org/wiki/Polish_alphabet#Computer_encoding

Answer 4

I have had the same problem and i solved it by reading multiple threads. What i did was create a new function/plugin and add the mimetype and contentType in it and it returned the correct encoding.

    (function($){
    $.fn.formatload = function( url, params, callback ) {
        if ( typeof url !== "string" ) {
            return _load.call( this, url );

        // Don't do a request if no elements are being requested
        } else if ( !this.length ) {
            return this;
        }

        var off = url.indexOf(" ");
        if ( off >= 0 ) {
            var selector = url.slice(off, url.length);
            url = url.slice(0, off);
        }

        // Default to a GET request
        var type = "GET";

        // If the second parameter was provided
        if ( params ) {
            // If it's a function
            if ( jQuery.isFunction( params ) ) {
                // We assume that it's the callback
                callback = params;
                params = null;

            // Otherwise, build a param string
            } else if ( typeof params === "object" ) {
                params = jQuery.param( params, jQuery.ajaxSettings.traditional );
                type = "POST";
            }
        }

        var self = this;

        // Request the remote document
        jQuery.ajax({
            url: url,
            type: type,
            mimeType: "text/html; charset=iso-8859-2",
            dataType: "html",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data: params,
            complete: function( res, status ) {
                // If successful, inject the HTML into all the matched elements
                if ( status === "success" || status === "notmodified" ) {
                    // See if a selector was specified
                    self.html( selector ?
                        // Create a dummy div to hold the results
                        jQuery("<div />")
                            // inject the contents of the document in, removing the scripts
                            // to avoid any 'Permission Denied' errors in IE
                            .append(res.responseText.replace(rscript, ""))

                            // Locate the specified elements
                            .find(selector) :

                        // If not, just inject the full result
                        res.responseText );
                }

                if ( callback ) {
                    self.each( callback, [res.responseText, status, res] );
                }
            }
        });

        return this;
    }
})(jQuery);

It is called as a normal jQuery load. e.g

$('#div').formatload(url, data, function(data){/*do stuff here */ });