JSP Not Suppported by UTF-8 Encoding
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?
Answer
Try this
- After adding your Chinese Character Save your JSP under UTF-8 encoding rather saving it in ISO-8859-1
- Try adding this line
<%@ page contentType="text/html; charset=UTF-8" %>at your JSP Header
Hope it helps.