JqueryMobile ajax load special characters in utf-8 not displaying

Question

My page content displays properly on the large screen page, but when accessed from mobile (jquerymobile) app page, the special characters are not displayed. Im using JqueryMobile 1.4.0 with Jquery 1.7.2 (all from google hosted libs).

For instance "Call Centre Agent - ADSL (INBOUND AND OUTBOUND)" on the large screen app reads ok but becomes "Call Centre Agent â€“ ADSL (INBOUND AND OUTBOUND)" on the mobile page.

I tried the suggestion which demonstrated similar problem but it did not solve mine.

My mobile app html snippet is:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
....

The php file headers snippet:

@header("Content-Type: text/html; charset=utf-8");
...

I also tried the suggestion to set the ajaxsetup The additional jquery snippet added to setup ajax:

$.ajaxSetup({
  contentType: 'charset=utf-8',
  beforeSend: function(jqXHR) {
    jqXHR.overrideMimeType('charset=utf-8');
  }
});

None of the mentioned suggestions helped.

Anyone who got over this can please suggest how, and alternative techniques are most appreciated.

You should use higher version than jquery 1.7, use 1.9 better. — Omar, Jul 11 '14 at 03:01
@Omar thanks. I tried both JQ 1.9.0 and 1.11.1 and none seem to solve my problem. — luhfluh, Jul 11 '14 at 09:45

score 0 · Accepted Answer · answered Jul 11 '14 at 15:51

Thanks for the suggestion(s) provided but Im afraid I inadvertently "created" the problem myself :( . The (original working) data connection access was done with PDO with no set 'charset' while the second ( problematic through the mobile app) had set 'charset'. So removed the charset to conform with the former.

(problematic through the mobile app) PDO connection code:

try {
    $db = new PDO(
        "mysql:host=$db_host;port=$db_port;dbname=$db_name;charset=utf-8",
        $db_user, $db_pass
    );
    $db->query("SET NAMES 'utf8'");
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}...

Rectified PDO code:

try {
    $db = new PDO(
        "mysql:host=$db_host;port=$db_port;dbname=$db_name;",
        $db_user, $db_pass
    );
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}...

Hope this helps someone to resolve similar issue.

JqueryMobile ajax load special characters in utf-8 not displaying

1 Answers1