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

2 comments:

  1. Did you know there's a 12 word phrase you can speak to your man... that will induce intense emotions of love and instinctual attractiveness to you buried inside his heart?

    That's because hidden in these 12 words is a "secret signal" that triggers a man's impulse to love, worship and care for you with his entire heart...

    ===> 12 Words Will Fuel A Man's Love Impulse

    This impulse is so hardwired into a man's genetics that it will make him work better than before to make your relationship the best part of both of your lives.

    Matter-of-fact, triggering this mighty impulse is so binding to having the best ever relationship with your man that the moment you send your man one of these "Secret Signals"...

    ...You will instantly notice him open his heart and soul for you in a way he never expressed before and he will distinguish you as the one and only woman in the world who has ever truly appealed to him.

    ReplyDelete
  2. If you're looking to burn fat then you need to try this brand new personalized keto meal plan.

    To create this keto diet service, certified nutritionists, personal trainers, and professional cooks united to develop keto meal plans that are powerful, suitable, cost-efficient, and satisfying.

    Since their grand opening in early 2019, hundreds of individuals have already transformed their body and health with the benefits a good keto meal plan can give.

    Speaking of benefits: clicking this link, you'll discover eight scientifically-proven ones provided by the keto meal plan.

    ReplyDelete

Followers