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?
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.
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());
$('#orgId').html("<option value=\'-1\'>------------ Select Organization ------------</option>"+xmlResponse);