Accented character encoding issue with JQuery, ajax and my Spring MVC controller

Question

I use the Google Places Autocomplete api for a web application that is going to have accented characters as input.

I am trying to strip accents from the input strings so that the Google Places Autocomplete can work properly.

When I type the following string sévin in the browser, I get the following in my IDE:

Then, of course, instead of getting the following unaccented string: sevin, I get something like: sA©vin.

I have no clue in which layer of my app, the encoding issue occurs.

Here is the JQuery/JS:

ajax : {
            url : base + '/geolocation/addressAutocomplete',
            dataType : 'json',
            data : function(term) {
                return {
                    address: term
                };
            },
            results : function(data) {
                if (data.status == 'OK') {
                    return {
                        results : $.map(data.predictions, function(item) {
                            return {
                                id : item.reference,
                                text : item.description
                            };
                        })
                    };
                }
            }
        },

Here is the Spring MVC controller method:

@RequestMapping(value = "/addressAutocomplete", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public GooglePlacesAutocompleteResponse validateAddressAutocomplete(@RequestParam String address) {
        return geolocationService.autocompleteAddress(address);
    }

Can anyone please help?

Answer 1

It turns out it was an issue with Tomcat.

After setting the URIEncoding attribute to UTF-8 in the Connector tag of server.xml, the problem was gone.

See below:

<Connector
port="8080"
URIEncoding="UTF-8"
...

Answer 2

Did you specify a Unicode transfer format (such as UTF-8 or UTF-16) as your form's accept-charset attribute? It's possible that the accented characters aren't being encoded correctly if the browser's defaulting to a non-Unicode charset. I'd try that first.

Try adding accept-charset="UTF-8" or accept-charset="UTF-16" to the form tag.

Answer 3

Hi @balteo maybe can you try does put something like that: contentType: "application/x-www-form-urlencoded; charset=UTF-8" into ajax request,

ajax: {
        url: base + '/geolocation/addressAutocomplete',
        dataType: 'json',   
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: function(term) {
            return {
                address: term
            };
        },
        results: function(data) {
            if(data.status == 'OK') {
                return {
                    results: $.map(data.predictions, function(item) {
                        return {
                            id: item.reference,
                            text: item.description
                        };
                    })
                };
            }
        }
    },

I hope help you :)

Answer 4

Use

        decodeURIComponent(escape(item.description)) 

instead of

        item.description

will resolve this issue