Handling UTF-8 encoded content with jQuery 1.4

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!