Recently I encountered a text encoding related issue in jQuery 1.4.
Let's say that we have a todo list application written in jQuery.
This application supports internationalization for english and arabic, so we will use UTF-8 character encoding.
The content displayed is stored in a database and it is read using a servlet.
The problem that I encountered is that, for some reason, arabic text was not displayed correctly.
The code in the view.jsp contains
<%@ page contentType="text/html; charset=UTF-8" %>
<script language="JavaScript" src="<%= PortalUtil.getStaticResourceURL(request, request.getContextPath() "/js/todo.js", portlet.getTimestamp()) %>" charset="UTF-8"></script>
The todo.js code makes ajax calls to a servlet that serves the todo list information in json format.
var ajaxOptions = {
scriptCharset: 'UTF-8',
contentType: 'application/x-www-form-urlencoded; charset=utf-8'
}
jQuery.ajaxSetup(ajaxOptions);
var folderData = {
'action' : 'readFolders',
'userId' : userId,
'userName' : userName
}
jQuery.ajax({
url: this.contextPath '/TodoServlet',
data: folderData,
dataType: 'json',
success: function(data){
if(data.message == 'SUCCESS'){
todoFolders.folders = Array();
todoFolders.quickNotes = Array();
//normal and tasks folders
if(data.folders && data.folders.length > 0){
jQuery.each(data.folders, function(i,f) {
var folder = new TwFolder(f.folderId, f.folderIcon, f.folderTitle, f.folderColor, f.folderType, todoFolders.contextPath, f.folderContent);
...
});
}
}
}
});
It seems that the arabic content should be displayed correctly because the page content type is set to UTF-8, and the content type in ajax setup is set as well to UTF-8. But, unfortunately, this was not the case.
After a few hours of digging around the web for solutions to this problem, I found that there was one thing that I didn't do. In TodoServlet.java, the servlet that is called by jQuery, the character encoding must be set on the response.
public class TodoServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) {
handleAction(request, response);
}
protected void handleAction(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
response.setCharacterEncoding("UTF-8");
String action = request.getParameter("action");
long userId = GetterUtil.getLong(request.getParameter("userId"));
if (userId != 0) {
JSONObject jsonResponse = JSONFactoryUtil.getJSONFactory().createJSONObject();
}
...
This solved my problem, and the result was this:
I hope this helps if you encounter this type of issue.
Cheers!