If we are going to show any non-English language directly in our ColdFusion code then we will get some corrupted text.
Example: In below code I am simply trying to show a Japanese sentence.
<cfset x = "ユーザー名および/またはパスワードが正しくありません。もう一度やり直してください。" />
<cfoutput>#x#</cfoutput>
Our browser is not displaying any Japanese character which we wants to display instead it's showing some other characters. How to display that?
It's very simple, just add "<cfprocessingdirective pageencoding="UTF-8">" at the start of the page like below:
<cfprocessingdirective pageencoding="UTF-8">
<cfset x = "ユーザー名および/またはパスワードが正しくありません。もう一度やり直してください。" />
<cfoutput>#x#</cfoutput>
So, I am getting the desired output by using "cfprocessingdirective". It's always advisable to put this tag in onRequest method of Application.cfc in our application so that we don't have to place it in all cfm pages of our application.
Our cfm page now able to display multibyte characters in browser. What about AJAX calls? What will happen when we will make an AJAX call to a ColdFusion component which returns some multibyte characters?
Let's explore...
Here is my "testchar.cfm" code:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
//Making AJAX call to function returnChar present in component testchar.cfc which returns
//the same Japanese string.
$("#reloadC").click(function() {
$.ajax({
type: "post",
url: './testChar.cfc?method=returnChar',
success: function(data) {
$('#multi-char').html(data);
},
dataType: 'json'
});
});
});
</script>
</head>
<body>
<h3>Display Multibyte Character</h3><hr/>
<p>Press Refresh button to get multibyte characters from AJAX call</p>
<!--- Press refresh button to get multibyte characters from AJAX call --->
<input type="button" name="reloadC" id="reloadC" value="Refresh" />
<div id="multi-char" style="width:500px"></div>
</body>
</html>
<cfcomponent output="true">
<cffunction name="returnChar" access="remote" returnformat="JSON">
<cfset x = "ユーザー名および/またはパスワードが正しくありません。もう一度やり直してください。" />
<cfreturn x />
</cffunction>
</cfcomponent>
So, again I am getting unwanted result. So, how to solve in ColdFusion component?
Here we have to place "cfprocessingdirective" tag after cfcomponent tag and before starting of any function like below.
<cfcomponent output="true">
<cfprocessingdirective pageEncoding = "UTF-8" suppressWhiteSpace = "yes">
<cffunction name="returnChar" access="remote" returnformat="JSON">
<cfset x = "ユーザー名および/またはパスワードが正しくありません。もう一度やり直してください。" />
<cfreturn x />
</cffunction>
</cfprocessingdirective>
</cfcomponent>
No change is required in the "testChar.cfm" page.
When I runs the testChar.cfm again and clicks the refresh button then I gets following output.
Hope it may save your time!!!
