How to load ISO-8859-1 content via AJAX in jQueryM

Question

I have got a PHP script (CMS) which generates ISO-8859-1 content (in the background there is also a database with Latin1 data). To visualize the data on mobile devices I use jQuery Mobile 1.3.1. In general there is no problem with character encoding if you use the correct meta tag in your HTML:

<meta charset="iso-8859-1" />

However jQuery Mobile has got this default setting:

$.mobile.ajaxEnabled = true;

So jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible.

This is a very smart feature, but it destroys some special characters like german umlaute and you get this nasty characters: �

Answer 1

The problem is that jQuery Mobile 1.3.1 uses on default UTF-8 on ajax requests. There are different solutions to solve the problem:

1. Disable Ajax for specific links, which redirect to content with special characters:

   data-ajax="false"
   

2. Turn off completely the ajax preloading feature:

   $.mobile.ajaxEnabled = false;
   

3. Follow this recommendation and manually set the correct content type and override the mime type:

   $.ajaxSetup({
     contentType: 'application/x-www-form-urlencoded; charset=ISO-8859-1',
     beforeSend: function(jqXHR) {
       jqXHR.overrideMimeType('application/x-www-form-urlencoded; charset=ISO-8859-1');
     }
   });
   

The last solution did work for me.