6

When I am trying to display Chinese characters in my JSP page, then it will display junk characters.

What did I do wrong?

I have included the below line to my JSP on the top, and even now, the issue is not getting fixed:

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>

<%@ page import="java.util.*"%>
<%@ page import="com.hp.sales.om.workflow.c2c.config.model.Organization"%>
<%@ page import="com.hp.sales.om.workflow.c2c.config.model.ClassificationL1"%>
<%@ page import="com.hp.sales.om.workflow.c2c.config.model.ClassificationL2"%>
<%@ page import="com.hp.sales.om.workflow.c2c.config.model.TaskConfig"%>

 <script type="text/javascript" language="javascript"
src="/integration/r5/hpr/js/jquery-1.3.2.js"></script>

<script language="JavaScript">
//Javascript code here...
</script>

<%
String taskId = (String) request.getAttribute("taskId");
if (taskId == null || taskId.trim().equals("")) {
    taskId = ""; 
%>
<jsp:include page="/Header.jsp" />
<%@ taglib uri="http://xmlns.oracle.com/bpel/workflow/worklist-taglib.tld" prefix="worklist"%>
<link rel="stylesheet" type="text/css" href="/integration/r5/hpr/css/homepages-v5.css" />
<%
Map links = new LinkedHashMap();
    links.put("Select Task", request.getContextPath()
            + "/SelectTask");
    String disableCondition = "";
%>

<worklist:navLinks linkMap="<%=links%>" styleClass="customBreadCrumbNav"
separator=" > " prefixHTML="<strong>" suffixHTML="</strong>"
disableConditionBasedOn="<%=disableCondition%>" />
<!-- border table -->
 <TABLE WIDTH="100%" BORDER="0">
 <TR>
     <TD>
        <TABLE WIDTH="100%" BORDER="1">
             <TR>
                        <TD>
                            <%
                                } else {
                             %>
                    <html>
 <head>
 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
 <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Select Task</title>
 </head>
 <body>
<%
    }
%>
<br />
<form STYLE="display: inline;" method="POST" name="SelectTask"
    action="<%=request.getContextPath()%>/SelectTask">

    <input type="hidden" name="method" id="method" value='' /> <input
        type="hidden" name="method" id="method" value='' /> <input
        type="hidden" name="taskId" id="taskId" value='<%=taskId%>' />

    <!-- jQuery Ajax stuff for new way of create task, page not be refresh when choose organization -->
    <script type="text/javascript">
     var servletContextPath = <%=request.getContextPath()%>
        ";"
        $(document)
                .ready(
                        function() {

                            $(window).load(function() {
                                                $.ajax({
                                                            url : servletContextPath
                                                                    + "/OrganizationLoadServlet",
                                                            cache : false,
                                                            beforeSend : function() {
                                                                //alert(this.url == 'myUrl');
                                                                //timeout setting 30second
                                                                ajax_timeout = setTimeout(
                                                                        function() {
                                                                            //alert('Request is taking a long time.');
                                                                                                            },
                                                                        30000);
                                                                //
                                                            },
                                                            success : function(
                                                                    xmlResponse) {
                                                                var count = 0;
                                                                $(xmlResponse)
                                                                        .find('ITEMS')
                                                                        .each(function() {
                                                                                    count++;
                                                                                });
                                                                if (count == 1) {
                                                                    $(xmlResponse).find('ITEMS')
                                                                            .each(function() {
                                                                                                                                });
                                                                    $.ajax({
                                                                                type : "GET",
                                                                                url : servletContextPath
                                                                                        + "/OrganizationProcessHandler",
                                                                                data : {
                                                                                    orgId : $params
                                                                                },
                                                                                cache : false,
                                                                                beforeSend : function() {
                                                                                    ajax_timeout2 = setTimeout(
                                                                                            function() {
                                                },
                                                                                            30000);
                                                                                },
                                                                                success : function(xmlResponse) {
                                        $(xmlResponse).find('ITEMS')
                                                                                            .each(function() {
                                                        });
                                                                                    //timeout calling
                                                                                    if (ajax_timeout2) {
                                                                                        clearTimeout(ajax_timeout2);
                                                                                    }
                                                                                }
                                                                            });

                                                                } else {
                                                                    $(xmlResponse).find('ITEMS')
                                                                            .each(function() {
                                                                                    });
                                                                }
                                                                //timeout calling
                                                                if (ajax_timeout) {
                                                                    clearTimeout(ajax_timeout);
                                                                }
                                                                //
                                                            },
                                                            complete : function() {
                                                                //alert(this.async == true);
                                                            }
                                                        });

                                            });

                            //Business Process choicebox
                            $("#orgId").change(function() {
                                                $.ajax({
                                                            type : "GET",
                                                            url : servletContextPath
                                                                    + "/OrganizationProcessHandler",
                                                            data : {
                                                                orgId : $params
                                                            },
                                                            cache : false,
                                                            beforeSend : function() {
                                                                //alert(this.url == 'myUrl');
                    //timeout setting 30second
                                                                ajax_timeout = setTimeout(
                                                                        function() {
                                                                            //alert('Request is taking a long time.');
                            },
                                                                        30000);
                                                                //
                                                            },
                                                            success : function(xmlResponse) {
                                                                $(xmlResponse).find('ITEMS')
                                                                        .each(function() {
                                                                                                                                                                        });
                                                                //timeout calling
                                                                if (ajax_timeout) {
                                                                    clearTimeout(ajax_timeout);
                                                                }
                                                                //
                                                            },
                                                            complete : function() {
                                                                //alert(this.async == true);
                                                            }
                                                        });

                                            });

                            //Task Group handler
                            $("#processId").change(function() {
                                                if ($processId.length != 0) {
                                                    $.ajax({
                                                                type : "POST",
                                                                url : servletContextPath
                                                                        + "/TaskGroupsForOrgAndProcessHandler",
                                                                data : {
                                                                    orgId : $orgId,
                                                                    processId : $processId
                                                                },
                                                                cache : false,
                                                                beforeSend : function() {
                                                                    //alert(this.url == 'myUrl');
                        //timeout setting 30second
                                                                    ajax_timeout = setTimeout(
                                                                            function() {
                                                                                //alert('Request is taking a long time.');
                                                                            },
                                                                            30000);
                                                                    //
                                                                },
                                                                success : function(xmlResponse) {
                                                                    $(xmlResponse).find('ITEMS')
                                                                            .each(function() {
                                                                                        //alert("Task Group === "+valTxt);
                                                                                        $('<option value="' + valTxt + '">'
                                                                                                        + labelTxt
                                                                                                        + '</option>')
                                                                                                .appendTo("#taskGrpId");
                                                                                    });
                                                                    //timeout calling
                                                                    if (ajax_timeout) {
                                                                        clearTimeout(ajax_timeout);
                                                                    }
                                                                    //

                                                                },
                                                                complete : function() {
                                                                    //alert(this.async == true);
                                                                }
                                                            });
                                                }
                                            });

                            //Task handler
                            $("#taskGrpId").change(function() {
                                                if ($taskGrpId.length != 0) {
                                                    $.ajax({
                                                                type : "POST",
                                                                url : servletContextPath
                                                                        + "/TaskConfigsHandler",
                                                                data : {
                                                                    orgId : $orgId,
                                                                    processId : $processId,
                                                                    taskGrpId : $taskGrpId
                                                                },
                                                                cache : false,
                                                                beforeSend : function() {
                                                                    ajax_timeout = setTimeout(
                                                                            function() {
                                                                                //alert('Request is taking a long time.');
                                                                            },
                                                                            30000);
                                                                    //
                                                                },
                                                                success : function(
                                                                        xmlResponse) {
                        $(xmlResponse).find('ITEMS')
                                                                            .each(function() {
                                                                                                                                                                            });
                                                                    //timeout calling
                                                                    if (ajax_timeout) {
                                                                        clearTimeout(ajax_timeout);
                                                                    }
                                                                    //

                                                                },
                                                                complete : function() {
                                                                    //alert(this.async == true);
                                                                }
                                                            });
                                                }
                                            });

                        });
    </script>
    <!-- endless -->

    <!-- Layer for during do submition -->
    <script type="text/javascript">
        $(document)
                .ready(
                        function() {
                            $("#Save").click(
                                            function() {
                                                var taskConfigId = document
                                                        .getElementById("taskConfigId").value;
                                                if (taskConfigId == null
                                                        || taskConfigId == ''
                                                        || taskConfigId == -4
                                                        || taskConfigId.length == 0) {
                                                    alert('Please select task');
                                                } else {
                                                    getBackToTaskCreationForm();
                                                    //Get the screen height and width
                                                    var maskHeight = $(document).height();
                                                    var maskWidth = $(window).width();

                                                    //alert("taskConfigId== " +taskConfigId);
                                                    //Set heigth and width to mask to fill up the whole screen
                                                    $('#mask').css({
                                                                        'width' : maskWidth,
                                                                        'height' : maskHeight
                                                                    });

                                                    //transition effect     
                                                                                            }
                                            });

                        });
    </script>

    <style>

The code continues below:

    <!-- endless -->

    <table width="100%" border="0" class="HeaderPane" cellpadding=0
        cellspacing=0 height="44" bordercolor="#000000">
        <tr width="100%">
            <td width="100%" class="customContentText"><strong>Organization:</strong>
                <select id="orgId" name="orgId">
                    <option VALUE='-1'>------------ Select Organization
                        ------------</option>
            </select></td>
        </tr>
        <tr width="100%">
            <td width="100%" class="customContentText">
                <p id="loading" style="margin-left: 80px;">
                    <img src="/integration/r5/hpr/images/ajax-loader.gif"
                        alt="loading" /> <br />Please wait....
                </p>
                <p id="done"></p>


                <p id="warning" style="margin-left: 80px;">
                    <img src="img/warnsign.gif" alt="warning" width="16" height="16" />
                    <br />Your request has timed out. Please try again. If this
                    condition continues, please contact your administrator.
                </p>  <br />
            </td>
        </tr>
        <tr width="100%">
            <td width="100%" class="customContentText">
                <table width="100%" align="center" class="HeaderPane" id="table1">
                    -------
                </table>
            </td>
            </form>
    </table>

    <!-- Mask to cover the whole screen -->
    <div id="mask">
        <center>
            <img src="/integration/r5/hpr/images/ajax-loader.gif" alt="loading" />
            <br />
            <font color="White" size="4"> Please wait....</font>
        </center>
    </div>


    <%
        if (taskId == null || taskId.trim().equals("")) {
    %>

                </TD>
            </TR>
        </TABLE>
    </TD>
</TR>
</TABLE>
<jsp:include page="/Footer.jsp" />
<%
        } else {
%>
</body>
</html>
<%
        }
%>

Here's my web.xml file:

<?xml version = '1.0' encoding = 'GBK'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns  /javaee/web-app_2_5.xsd"
     version="2.5" xmlns="http://java.sun.com/xml/ns/javaee">

</web-app>

Servlet:

public class OrganizationLoadServlet extends HttpServlet {
    private static Logger log = Logger.getLogger(OrganizationLoadServlet.class);

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HttpSession session = request.getSession();

        Organization[] orgs = (Organization[])session.getAttribute(WorklistappConstants.SESS_ATTR_PREFS_ORGANIZATIONS);

        if (orgs == null) {
            orgs = getFilteredOrgs(request);
            session.setAttribute(WorklistappConstants.SESS_ATTR_PREFS_ORGANIZATIONS, orgs);
        }

        log.info("Before: " + response.getCharacterEncoding());//Here I am getting "iso-8859-1"
        StringBuffer sb = new StringBuffer();
        String dislayName = null;
        for (int i = 0; i < orgs.length; i++) {
            Organization org = orgs[i];
            dislayName = org.getOrgDisplayName();

            sb.append("<ITEMS>");
            sb.append("<LABEL><![CDATA[" + dislayName + "]]></LABEL>");
            sb.append("<VALUE><![CDATA[" + org.getOrgId() + "]]></VALUE>");
            sb.append("</ITEMS>");
        }

        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        response.getWriter().write("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><ITEM>" + sb.toString() + "</ITEM>");
        log.info("After: " + response.getCharacterEncoding());//Here I am getting "iso-8859-1"

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    private Organization[] getFilteredOrgs(HttpServletRequest request) {
    //code
    return orgs;

    }

    private Organization[] filterOrganizationsByUserOrgs(Organization[] orgs, List<Long> userOrgIdList) {
        //code

        return filteredOrgs;
    }

    private List<Long> getUserOrgIdList(String userId) throws Exception {
    //code

        return userOrgIdList;
    }

    private String getUserID(HttpServletRequest request) throws IOException {

    //code
        return wfCtx.getUser();
    }

}

Please see the comments in the Servlet class. If I change iso-8859-1 to utf-8, then I am not able to access the application.

Why is this issue occurring?

Grant Miller
  • 27,532
  • 16
  • 147
  • 165
user1441341
  • 495
  • 2
  • 9
  • 23
  • which browsers did you test this on ? – Onur A. Sep 16 '13 at 09:25
  • 1
    Use a real browser and make sure that your data is coming correctly out of the databse. – Michael-O Sep 16 '13 at 09:33
  • real browser in the sense?? Mozilla or chrome??? – user1441341 Sep 16 '13 at 09:35
  • I am getting the chineese characters in all jsp pages, except one or two..Why this was happened?? Please help me... – user1441341 Sep 16 '13 at 10:21
  • 1
    try it in chrome, firefox, opera, safari etc. and make sure you include this tag just once in a jsp file – Onur A. Sep 16 '13 at 12:18
  • All the remaining pages work for IE but some of the pages are not working?? If it will work for chrome, firefox then all the remaining pages also doesnt work for IE, right?? – user1441341 Sep 17 '13 at 03:29
  • 1
    Would you post the JSP code for the a pages that is not working. Perhaps there's something missing or misplaced. – Alex Theedom Sep 23 '13 at 12:24
  • As the others said, please state on what browsers (IE, Chrome, Firefox, Opera or at least two of them) your problem appears and also post the JSP code of the non-working pages. This way we can have better indications of your problem. – Adrian Ber Sep 23 '13 at 22:42
  • we will test our application in IE mostly, but if any problem happens with IE then we can test it in Chrome or Firefox. If it will works for IE then it will work for Chrome and Firefox also. – user1441341 Sep 24 '13 at 04:41

4 Answers4

3

Try this

  1. After adding your Chinese Character Save your JSP under UTF-8 encoding rather saving it in ISO-8859-1
  2. Try adding this line <%@ page contentType="text/html; charset=UTF-8" %> at your JSP Header

Hope it helps.

Holla
  • 152
  • 1
  • 9
  • Hi Holla, I will try this... I already done this except first point i did the same thing. anyways i will try with that also.. Many Thanks.. – user1441341 Sep 27 '13 at 03:45
1

Here, the problem is with CDATA. In Servlet, we used iso-8859-1 for sending xml response in xml format. When we tried with UTF-8, the response in xml format not being generated. So instead of sending xml response from servlet to jsp, we used to send that response as html format and displayed as html response on jsp page. This helps in fixed my issue.

In Servlet we modified

sb.append("<option value="+org.getOrgId()+">"+dislayName+"</option>");
    response.setContentType("text/html;charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");

    response.getWriter().write(sb.toString());

JSP

$('#orgId').html("<option value=\'-1\'>------------ Select Organization ------------</option>"+xmlResponse);
user1441341
  • 495
  • 2
  • 9
  • 23
0

Have you ever tried to use lang attribute for your page?

Something like this:

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xml:lang="zh">

Zeinab Abbasimazar
  • 9,835
  • 23
  • 82
  • 131
  • Hi @Zeinab, it is working in all other jsp pages, but if we mentioned in web.xml file this is for whole application, right??? – user1441341 Sep 30 '13 at 09:09
  • I think so. the main app is running there. – Zeinab Abbasimazar Sep 30 '13 at 09:37
  • yeah, remaining pages are running properly, but we are doing ajax cal from this jsp page and the req will be handled by servlet. In that servlet there was some mistake. that is the prob here. – user1441341 Sep 30 '13 at 09:39
  • Thanks for explanation, I think this link (http://stackoverflow.com/questions/3029401/java-servlet-and-utf-8-problem?answertab=active#tab-top) and this one (http://www.xyzws.com/Javafaq/how-to-return-the-content-in-the-correct-encoding-from-a-servlet/211) can be useful. – Zeinab Abbasimazar Sep 30 '13 at 11:20
  • Also this one (http://zetcode.com/tutorials/jeetutorials/servlets/) is a good tutorial and has an example similar to your code. Hope it would help. – Zeinab Abbasimazar Sep 30 '13 at 11:23
0

The JSP Header that you are using is correct.
But, I think problem might be in the project's encoding setting.
UTF-8 is not default content type in jsp. So you have to change project's text file encoding to utf-8.

I have no Idea in JDeveloper.... But In Eclipse You can change this way.

Right Click In Project --> Properties --> Under Resource(Text File Encoding should be selected in "Inherited from Container(UTF-8)"
Surendra Jnawali
  • 3,190
  • 5
  • 28
  • 44
  • Chinese text changed to junk characters.When it problem occurs? During save in workspace(IDE) or during display in browser? please clarify – Surendra Jnawali Sep 30 '13 at 09:27
  • during display in browser only. and one more thing it is an ajax call from jsp and the request will be handled by "OrganizationLoadServlet" – user1441341 Sep 30 '13 at 09:36