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:

screen capture

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?

balteo · Accepted Answer · 2013-09-18 07:47:27Z

3

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"
...

answered Sep 18, 2013 at 7:47

balteo

24.9k67 gold badges237 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WebManWalking · Accepted Answer · 2013-09-17 22:14:44Z

1

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.

answered Sep 17, 2013 at 22:14

WebManWalking

1111 silver badge9 bronze badges

Comments

hekomobile · Accepted Answer · 2013-09-17 22:30:12Z

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 :)

Riadh · Accepted Answer · 2017-09-13 15:26:15Z

1

Use

        decodeURIComponent(escape(item.description))

instead of

        item.description

will resolve this issue

answered Sep 13, 2017 at 15:26

Riadh

1,2163 gold badges15 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related