Encoding issue with Japanese characters from ColdFusion's SerializeJSON

Question

I'm working on a 1-page mini app that can be deployed on a client's site with 2 lines of code. This would be theirpage.html

<div id="builder_wrapper"></div>
<script src="http://example.com/js/loader.cfm?id=14"></script>

Then, on the loader.cfm page, it calls an all HTML file on the server and puts it into the "builder_wrapper" page:

<cffile action="read" file="c:\websites\example.com\wb-themes\#GetWBSettings.intThemeID#\builder.cfm" variable="html">
document.getElementById("builder_wrapper").innerHTML = <cfoutput>#SerializeJSON(html)#</cfoutput>;

So, I got a request to build a special theme in Japanese language. I replaced the English text with Japanese code. But it is coming up as a bunch of random characters: ã¹ãã¼ã¯ ãã§ã¤ã¹

I added the utf-8 meta tag to my testing theirpage.html, and that didn't solve the problem. I looked at the server response for loader.cfm, and the characters are all ã¹ãã¼ã¯ ãã§ã¤ã¹. I checked the code on Notepad, and the Japanese characters are all there. So, I'm thinking the serializeJSON() is doing this.

I'm a little stuck.

@Miguel-F, I tried putting <cfcontent type="application/json; charset=utf-8"> both at the beginning of the loader.cfm file and at the beginnning of the builder.cfm file. It didn't work — Jack Pilowsky
I'm confused by your description - "I checked the code on notepad, and the Japanese characters are all there". Where did you check the code in Notepad? Do you know at what point in the process the characters are getting changed? — Miguel-F
I found the solution: The problem was was with the CFFILE read. It had to have a charset="UTF-8" property — Jack Pilowsky
@JackPilowsky pls offer your solution as an ANSWER to help the next person with the same issue (and so we know you don't need further help!). Cheers fella. — Adam Cameron

Jack Pilowsky Jack Pilowsky · Accepted Answer · 2014-07-29T20:01:55

The problem was not with the serializeJSON function as I first thought. The problem was the CFFile read.

<cffile action="read" file="c:\websites\example.com\wb-themes\#GetWBSettings.intThemeID#\builder.cfm" variable="html" charset="utf-8">
document.getElementById("builder_wrapper").innerHTML = <cfoutput>#SerializeJSON(html)#</cfoutput>;

Encoding issue with Japanese characters from ColdFusion's SerializeJSON

1 Answers