jQuery Grid Charset

Question

I am currently using a jQuery Grid to display data written in spanish, the data is displayed perfectly with accents ( ´ ) but whenever I try to search data using accent the server gets a malformed string like ∫√ instead the letter with accent.

I am also sure this is a jQuery Grid problem since I am able to send data with accents submitting a form in the same page.

I also added the content type in the header it as follows:

<%@ page contentType="text/html;charset=UTF-8" %>
<sj:head jquerytheme="redmond" locale="es" />

This is the code of my jQuery grid wich I'm using with the struts2 plugin.

<s:url id="remoteurl" action="tabla-historial-director"  />
<s:url id="selectperiodourl" action="periodos" />

<sjg:grid
    id="grid"
    caption="Trabajos Terminales dirigidos"
    dataType="json"
    href="%{remoteurl}"
    pager="true"
    navigator="true"
    navigatorAdd="false"
    navigatorDelete="false"
    navigatorEdit="false"  
    gridModel="gridModel"
    rowList="3,10,15,20"
    rowNum="10"
    hidegrid="false"
    gridview="true"
    viewrecords="true"
>
    <sjg:gridColumn 
    align="center"  
        name="numRegistro"
        index="numRegistro"
        title="No. de registro"
        width="120"
        sortable="true"
        search="true"
        searchoptions="{sopt:['eq']}"
    />
    <sjg:gridColumn
        name="titulo"
        index="titulo"
        title="Título"
        width="840"
        search="true"
        searchoptions="{sopt:['cn']}"
    />
    <sjg:gridColumn
        align="center"
        name="tipo"
        index="tipo"
        title="Tipo"
        width="60"
        search="false"
    />
    <sjg:gridColumn
        align="center"
        name="periodo"
        index="periodo"
        title="Periodo"
        width="80"
        search="true"
        surl="%{selectcountrysurl}"
        searchoptions="{sopt:['eq'], dataUrl : '%{selectperiodourl}'}"
        searchtype="select"
    />
    <sjg:gridColumn
        align="center"
        index="objetivo"
        name="objetivo"
        editable="true"
        sortable="true"
        hidden="true"
        editrules="{ edithidden : true } "
        title="Objetivo"
        width="20"
    />
    <sjg:gridColumn 
        search="false"
        sortable="false"
        name="idTT"
        key="true" 
        title="Acción"
        width="80"
        formatter="formatLink"
    />
</sjg:grid>

Please I'd like to know how to use the search button along with spanish accents, thank you very much for the help.

Answer 1

Someone might have solved a similar problem here: JQuery punctuation for spanish (ó, í, etc.) not working in IE8

He did the following:

header("text/html; charset=iso-8859-1");

Here is some more clues in this answer: jQuery AJAX Character Encoding

What the guy said: "UTF-8 is supposed to handle all accents and foreign chars - why not use it on your data source?

Everything should be UTF-8 in the first place. I loaded the files in notepad++, converted to utf-8 and manually changed the charactes to accents were needed. Once done everything's working like a charm.

BTW, unless your server is defined to php-process .html files, the files you're loading with ajax aren't getting your iso charset. If you insist on using the iso charset, request a php file instead of an html file, and define the charset in the header (not in the file itself)"

Is this helping you?

You could always try html friendly codes, and replace them into your searches: http://webdesign.about.com/od/localization/l/blhtmlcodes-sp.htm

Another guy ran into some Spanish character issues here: http://ianloic.com/2009/12/27/jquery-selector-escaping/

He wrote an escape function, which may not be what you were after:

(function($) {
if ($) {
var escape_re = /[#;&,\.\+\*~':"!\^\$\[\]\(\)=>|\/\\]/,
escapeCharacters = {
‘#’: 1,
‘;’: 1,
‘&’: 1,
‘,’: 1,
‘.’: 1,
‘+’: 1,
‘*’: 1,
‘~’: 1,
‘\”: 1,
‘:’: 1,
‘”‘: 1,
‘!’: 1,
‘^’: 1,
‘$’: 1,
‘[': 1,
']‘: 1,
‘(‘: 1,
‘)’: 1,
‘=’: 1,
‘>’: 1,
‘|’: 1,
‘/’: 1,
‘\\’: 1
};
$.escape = function(s){
var ret = ”, offset;
if (s && ((offset = s.search(escape_re)) !== -1)) { // look for an occurence of a special character
ret = s.substr(0, offset) + ‘\\’ + s[offset];
for(var i=offset + 1, len=s.length, ch; i < len; i++){ // assume that another special character may occur so we just loop through the rest of the string
ch = s[i];
ret += (escapeCharacters[ch]? '\\': '') + ch;
}
}
return ret;
};
}
})(window.jQuery);

hth