I have a JSP / Servlet page with JQgrid (ver 4.1.2). In this grid when there are any accent character it does not show those characters. The grid gets its input in JSON format.
I verified that the accent characters are written to the response object. Using firebug I saw that the JSON response received by the grid does not have the accent characters. The request header information is
Accept application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Type text/html; charset=UTF-8
Cookie XXXX
Host XXXX
Referer http://XXXXXXXX
User-Agent Mozilla/5.0 (Windows NT 5.2; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0
X-Requested-With XMLHttpRequest
And the response header is
Content-Type text/html
Date Tue, 25 Nov 2014 10:42:29 GMT
Server Apache-Coyote/1.1
Transfer-Encoding chunked
I also set the response header's Content-Type to application/json but also the received JSON string does not show the accent character.
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
When I googled this issue it was mentioned to use autoencode:true and ajaxGridOptions: { contentType: 'text/html; charset=UTF-8' } and formatter:null. Also it was mentioned to add <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">. I have also added <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
But still the accent characters are not shown. Can any one let me know what I am missing?
Test codes:
Servlet JQGridDemo code
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
@SuppressWarnings("serial")
public class JQGridDemo extends HttpServlet {
protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
String page = "1";
String totalPages = "2";
String totalCount = "15";
String[] rowId = { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
"11", "12", "13", "14", "15" };
String[] InvNo = { "101", "102", "103", "104", "105", "106", "107",
"108", "109", "110", "111", "112", "113", "114", "115" };
String[] DateRec = { "03/30/12", "03/31/12", "04/01/12",
"04/02/12", "04/03/12", "04/04/12", "04/05/12",
"04/06/12", "04/07/12", "04/08/12", "04/09/12",
"04/10/12", "04/11/12", "04/12/12", "04/13/12" };
String[] AmountRec = { "11000", "12000", "13000", "14000", "15000",
"16000", "17000", "18000", "19000", "20000", "21000", "22000",
"23000", "24000", "25000" };
String[] TaxRec = { "1000", "1000", "1000", "1000", "1000", "1000",
"1000", "1000", "1000", "1000", "1000", "1000", "1000", "1000",
"1000" };
String[] TotalRec = { "12000", "13000", "14000", "15000", "16000",
"17000", "18000", "19000", "20000", "21000", "22000", "23000",
"24000", "25000", "26000" };
String[] NotesRec = { "Mineta San José", "Invoice 2", "Invoice 3",
"Invoice 4", "Mineta San José", "Invoice 6", "Invoice 7",
"Invoice 8", "Invoice 9", "Invoice 10", "Invoice 11",
"Invoice 12", "Invoice 13", "Invoice 14", "Invoice 15" };
response.setContentType("application/json; charset=UTF-8");
response.setCharacterEncoding("utf-8");
try {
if (action.equals("fetchDataJSON")){
response.setContentType("text/json; charset=UTF-8");
JSONArray cellarray = new JSONArray();
JSONObject responsedata = new JSONObject();
responsedata.put("page", page);
responsedata.put("total", totalPages);
responsedata.put("records", totalCount);
for(int record = 0; record < rowId.length; record++){
JSONArray cell = new JSONArray();
JSONObject cellobj = new JSONObject();
cellobj.put("id", record + "");
cell.add(InvNo[record]);
cell.add(DateRec[record]);
cell.add(AmountRec[record]);
cell.add(TaxRec[record]);
cell.add(TotalRec[record]);
cell.add(NotesRec[record]);
cellobj.put("cell", cell);
cellarray.add(cellobj);
/*cellobj.clear();
cell.clear();*/
}
responsedata.put("rows", cellarray);
out.write(responsedata.toString());
}
} catch (Exception e) {
e.printStackTrace();
}finally{
out.close();
}
}
// Process the doGet request
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
// Process the doPost request
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
}
Test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8">
<title>Home</title>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'<%=request.getContextPath()%>/JQGridDemo?q=1&action=fetchDataJSON',
datatype: 'JSON',
autoencode:true,
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid',index:'invid',width:55,
sortable:false,editable:true,hidden:false,
editoptions: {disabled: false},
editrules:{edithidden:true,custom:false}},
{name:'invdate', index:'invdate', width:160,
sortable:false,editable:true,hidden:false,
editrules :{edithidden:false,required:false,date:true},
editoptions :{dataInit:function(element){$(element).datepicker(
{dateFormat:'mm/dd/yy'});}},
formatoptions: {newformat:'m/d/Y'},
formoptions:{elmprefix:' '}},
{name:'amount',index:'amount',width:80,align:'right',
sortable:false,editable:true,hidden:false,
editoptions: {disabled: false},
editrules:{edithidden:true,custom:false},
formoptions:{elmprefix:'*'}},
{name:'tax',index:'tax',width:80,align:'right',
sortable:false,editable:true,hidden:false,
editoptions: {disabled: false},
editrules:{edithidden:true,custom:false}},
{name:'total',index:'total',width:80,align:'right',
sortable:false,editable:true,hidden:false,
editoptions: {disabled: false},
editrules:{edithidden:true,custom:false}},
{name:'note', index:'note', width:150,
sortable:false,editable:true,hidden:false,
editoptions: {disabled: false},
editrules:{edithidden:true,custom:false},
autoencode: false}
],
pager: '#pager1',
rowNum:5,
height:'auto',
loadonce:true,
width:'100%',
gridview: true,
autowidth:true,
shrinkToFit:false,
rowList:[5,10,15,20,25,30],
sortname: 'invid',
sortorder: 'asc',
viewrecords: true,
editurl:'<%=request.getContextPath()%>/JQGridDemo?q=1&action=editDataJSON',
caption: 'My first grid',
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
}
});
$("#list").jqGrid('navGrid',"#pager1",{add:true,edit:true,del:true,search:true,refresh:true,
beforeRefresh: function(){
$("#list").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid', [{page:1}]);
}},
{},{},{},{
closeAfterSearch: true,
modal: true
});
});
</script>
</head>
<body>
<table id="list">
</table>
<div id="pager1"></div>
</body>
I have tested this code with json-lib-2.4-jdk15.jar and json-simple.jar JSON library. The accent characters are not shown in the JQGrid
