{"id":220,"date":"2012-06-23T16:24:17","date_gmt":"2012-06-23T08:24:17","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=220"},"modified":"2018-09-03T22:22:34","modified_gmt":"2018-09-03T14:22:34","slug":"how-to-ensure-that-your-javascript-is-able-to-write-unicode-characters-from-external-javascript-files-to-your-html-contents","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-ensure-that-your-javascript-is-able-to-write-unicode-characters-from-external-javascript-files-to-your-html-contents\/","title":{"rendered":"How to ensure that your Javascript is able to write unicode characters from external Javascript files to your HTML contents"},"content":{"rendered":"

Ever tried injecting Chinese characters into your HTML DOM from an external Javascript file but got something that resembles the following?<\/p>\n

\"Gibberish<\/p>\n

Well that was what I got for the Chinese version of my bilingual form initially as a result of validating an input field as the user is filling up my form<\/a>.<\/p>\n

In this post, I will discuss why I got the unwanted characters and what I did to solve the problem.<\/p>\n

Segmentation of the Javascript codes<\/h3>\n

To facilitate the implementation of the form's validation logic, I had created one Javascript file for each language; one for the Chinese version and the other for the English version. Each Javascript file declares an object with the same set of members that are initialized with string literals that contains the error messages. <\/p>\n

With that, the Javascript codes for the bilingual form were segmented into three separate chunks:<\/p>\n

    \n
  1. Codes that preset the object members with English<\/strong> string literals. These codes are contained in the en-labels.js<\/code> file.\n
    \r\nlabelsMap = {\r\n    errMsgForBlankNumberField        : 'Please fill in a number.',\r\n    errMsgNoSpecialCharactersAllowed : 'Your input should be a number.',\r\n};\r\n<\/pre>\n<\/li>\n
  2. Codes that preset the object members with Chinese<\/strong> string literals. These codes are contained in the zh-simplified.js<\/code> file.\n
    \r\nlabelsMap = {\r\n    errMsgForBlankNumberField        : '\u8acb\u8f38\u5165\u53f7\u7801\u3002',\r\n    errMsgNoSpecialCharactersAllowed : '\u8acb\u52ff\u8f38\u5165\u7279\u6b8a\u5b57\u5143\u6216\u7b26\u865f\u3002',\r\n};\r\n<\/pre>\n<\/li>\n
  3. Codes that validate the form input, which are contained in the validation.js<\/code> file.\n
    \r\n$(document).ready(\r\n    \/\/ Handler for document ready event\r\n    function () {\r\n\r\n        $('#yourNumberTextField').change(\r\n \r\n            \/\/ Handler for changes detected on yourNumberTextField\r\n            function () {\r\n \r\n                if ($.trim( $(this).attr('value') ) == '') {\r\n                    $outputErrorMessage($(this),\r\n                        labelsMap.errMsgForBlankNumberField);\r\n                }\r\n                else if (!$.isNumeric($.trim($(this).attr('value')))) {\r\n                    $outputErrorMessage($(this),\r\n                        labelsMap.errMsgNoSpecialCharactersAllowed);\r\n                }\r\n                else {\r\n                    $(this).removeClass('errorField');\r\n                    $(this).next().remove();\r\n                }\r\n\r\n            } \/\/ end function()\r\n\r\n        ); \/\/ end $('#yourNumberTextField').change\r\n\r\n    } \/\/ end function\r\n); \/\/ end $(document).ready\r\n<\/pre>\n<\/li>\n<\/ol>\n
    The server side code will then decide which Javascript file to include before the validation logic. <\/p>\n
    \r\n<script type="text\/javascript" src="en-labels.js"><\/script>\r\n<script type="text\/javascript" src="validation.js"><\/script>\r\n<\/pre>\n
    Or<\/p>\n
    \r\n<script type="text\/javascript" src="zh-simplified-labels.js"><\/script>\r\n<script type="text\/javascript" src="validation.js"><\/script>\r\n<\/pre>\n
    By separating the error messages from the validation logic, I need only one set of validation logic that will work for both versions the form. Furthermore, if the form needs to support another language in the future, I will just need to create another Javascript file with the respective error messages.<\/p>\n
    What had happened and how I solved the display problem<\/h4>\n
    It turns out that the editor which I was using to write the contents of zh-simplified-labels.js<\/code> had defaulted the file encoding to ANSI. To solve the display problem, I reopened zh-simplified-labels.js<\/code> with my Notepad++<\/a>, select the \"Convert to UTF-8\" option under the \"Encoding\" file menu, and save the changes. With that, my Chinese error message displays correctly.<\/p>\n
    \"Chinese<\/p>\n
    Other things to take note<\/h3>\n
    The following is a list of things to take note to ensure that Unicode characters are displayed correctly in your HTML page:<\/p>\n