Wednesday, November 27, 2013

Displaying multibyte characters or returning multibyte characters by AJAX call in ColdFusion

Sometimes we need to display a multibyte characters like Japanese or Chinese in our application or we have to build a application which can be converted into Japanese, Chinese or to some other non-English language.

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>
When I run above code I got following output in my browser.

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>
When I run the code I got following output.

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>
Here is our "testchar.cfc" code:
<cfcomponent output="true">
    <cffunction name="returnChar" access="remote" returnformat="JSON">
        <cfset x = "ユーザー名および/またはパスワードが正しくありません。もう一度やり直してください。" />
        <cfreturn x />
    </cffunction>
</cfcomponent>
When I runs the testChar.cfm page and clicks the refresh button I gets following output.

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!!!

No comments:

Post a Comment

Followers