Why doesn't IE like Vietnamese characters when using ajax?

Question

The following markup shows my form:

<div id="category-form">

</div>

The following code is my script:

<script type="text/javascript">
    function clicked(o) {
        var id = o.getAttribute("data-categoryId");
        var name = o.getAttribute("data-categoryName");
        var description = o.getAttribute("data-description");
        loadFormView("/Admin/_EditCategories?categoryId="+ id + "&categoryName="+name+"&description="+description);


    }
    function loadFormView(url) {
        $.ajax({
            url: url,
            type: 'GET',
            cache: false,
            success: function (data) {
                $("#category-form").html(data);
                alert(data);
            }
        });
    }
</script>

I have also created a controller that passes data to the view:

public PartialViewResult _EditCategories(int categoryId, string categoryName, string description)
        {
            Category category = new Category();
            category.CategoryId = categoryId;
            category.CategoryName = categoryName;
            category.Description = description;
            ViewBag.Action = "Cập nhật";
            ViewBag.Task = "Sửa thể loại truyện";
            ViewBag.IsEdit = true;
            return PartialView("_TaskCategories", category);
        }

When the view renders the ViewBag content and it's rendered on IE, the text is garbled whereas on Chrome and Firefox, the text appears correctly, in Vietnamese.

"Truyện cười" is categoryName's value

in textbox on ie: "Truy?n c??i" and.... on ff or chrome: "Truyện cười"

How can I fix the text rendering in IE? Thank you in advance!

Answer 1

Does your page include a meta tag to indicate encoding? IE might be having a difficult time figuring out which encoding to use. Make sure both of your files are encoded in utf8, and add the meta tag:

<meta charset="utf-8"> 

Answer 2

I think there's more going on here. I think your normal queries are sending your locale as an HTTP header that the AJAX for some reason isn't sending.

Since jQuery's ajax support allows you to specify your own custom headers, why don't you try setting the locale header explicitly yourself, that ought to rule out some simple HTTP issues.

Add Header in AJAX Request with jQuery