Charset encoding problems with JSP, JQuery and Javascript

Question

I'm experiencing some problems with charset encoding in my web-based application. Despite I've properly configured page encoding, special chars continue being shown truncated.

I'm using JQuery Easy UI plugins to do a great part of the job, but the problem also occours in simple jQuery/Javascript codes, as alert boxes, for example.

JSP Page Header:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%> <!-- "ISO-8859-1" -->
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
(...)

jQuery code:

$.fn.altStatusTarefa = 
function (idStat, idTar){
    var motivo =prompt("Informe o motivo da alteração:",
            "(Descrição suscinta)");
    if (motivo!=null && motivo!="")
      {
            var result = $.post("TarefaUpdateStatus", {
                                    idTarefa : idTar, 
                                    idStatus : idStat,
                                    motivoAlt : motivo 
                                } 
                            );
                result.done(function( data ) {
                     $.messager.show({
                        title:'Sucesso',
                        msg:'A alteração foi processada. ' +
                            'Tecle F5 para atualizar o formulário.',
                        showType:'show'
                        });
                });
                result.fail(function(jqXHR, textStatus) {
                    $.messager.alert('Erro',
                            'Houve um problema na atualização: ' + 
                            textStatus,'error');
                 });
                result.always({
                });
        }
    else{
            alert("Alteração cancelada.");
        }
     };

All these special characters (ã, ç, é, etc.) are truncated during runtime.

Any idea on what could be happening or what's the solution? Thanks!

You may need to ensure your code editor is using UTF-8 as well. — Diodeus - James MacFarlane, Aug 27 '13 at 19:51
What do you mean by truncated? Is the file being served to the browser incorrectly, or is it just the alert that is wrong? Can you use Chrome dev tool or Firebug to see what the content type of the JS file is? — Paul Grime, Aug 27 '13 at 22:26

score 3 · Accepted Answer · edited May 23 '17 at 12:29

After a saga on search for the response, I've manage to achive a solution.

First of all, my problems was solved through three steps in order to achieve the correct parsing of the entyre application:

Convert all .js files in Eclipse to UTF-8 charset (is not the default). In Eclipse, right click .js file - properties - Resource - Charset encoding area - choose UTF-8; After that, all special characters in the file should be truncated. They must be replaced for new ones (probably there's an automatic conversion available somewhere, feel free to research); It solved the problem of Mojibakes characters in every external javascript code, like "alerts" (scripts in JSP pages were doing well).
All responses using response.getWritter().write("...") should be encoded using response.setCharacterEncoding("UTF-8"); You may also use a filter as @BalusC wrote in the other answer. It solved problems on messagings through jQuery Easy UI Messager plugins, for example.
Data retrieved from DB (make sure your DB is using UTF-8 too!) fulfilling jQuery Easy UI DataGrid plugin was being encoded through JSON (Gson) by a Spring-managed Controller. In this case, you should use the statement produces={"application/json; charset=UTF-8"} in @RequestMapping Spring annotation, as described by Jensen in this question.

Note that I've not talked in this answer about data-insertion, the opposite data-flow, just because it was not affecting my system (it was already well configured). But you may find usefull to know that there's some features on jQuery Easy UI to do so, as request settings too.

I wrote almost a tutorial because this very anoyng issue was upseting me for two days, and I really hope to help someone else (specially those who are dealing with non-english languages) to be not bored with this stuff. Greetings to @BalusC for his valuable help.

edit: in time, this post is useful on charset encodings.

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

In the servlet behind the URL TarefaUpdateStatus, perform the following call before you grab the very first request parameter:

request.setCharacterEncoding("UTF-8");

Better yet, do the job in a servlet filter which is mapped on an URL pattern of /*, so that you don't need to copypaste this line over all servlets. If you happen to use Spring, it has such one filter in its library.

This line will tell the servletcontainer to use UTF-8 to decode the URL-encoded POST request parameters. Otherwise it will use container's default charset for this which is usually ISO-8859-1, which would only cause those parameter values to end up in Mojibake.

Note that this does not cover GET request parameters. This needs to be configured in servletcontainer's side.

it was worthy your answer, but unfortunatelly setting the request charset is not working. I've put this statement in a filter, during debug I've seen it being processed but results still the same. I forgot to say that I'm using javascript in a separate file, off JSP page. Everything that I put in JSP is correctly parsed, but if I use sth like a simple alert in javaScript/jQuery, it is shown as "Mojibake" (just in case special characters from Portuguese - ç, ã, ê, é, etc). Thanks for responding. – Alex Aug 28 '13 at 12:52
You mean, those hardcoded messages in JS file? Thus, your JS file is not saved using UTF-8 by the editor? I understood that you were talking about the submitted values. – BalusC Aug 28 '13 at 12:54
It is embarassing and very anoying. But I have no idea on what's going on. Database server is set to UTF-8, data sent with a form which uses jQuery Easy UI is submiting data correctly to DB, this same data is correctly shown in a simple table in JSP page. But when I show an alert in javaScript file or data in a DataGrid (jeasyui), special characters are not parsed. Since I've set request charset and JSP page charset, I'm wondering what I'm forgetting do do. Thanks again. – Alex Aug 28 '13 at 13:10
Have you verified that the JS file is been saved with the right encoding? – BalusC Aug 28 '13 at 13:11
I've checked and assured the .js file encoding, all right and fine. But guess... On the other hand, I've made a test in which a simple text is correctly shown if it placed between – Alex Aug 28 '13 at 20:43
What does the `Content-Type` response header of that JS file say? – BalusC Aug 28 '13 at 20:44
– Alex Aug 28 '13 at 21:49
No, I'm interested in the HTTP response header. Think like a webbrowser. – BalusC Aug 28 '13 at 22:41
I found the anwser(s), as I answered above. Thanks for your help, I hope my findings would also help you. Regards! (your answer voted up). – Alex Aug 29 '13 at 19:48

Charset encoding problems with JSP, JQuery and Javascript

2 Answers2

See also: