CODEWITHSUNDEEP
javascriptjqueryjquery-uicharacter-encoding
javsmo
javsmo

Reputation: 1337

Using ISO-8859-1 on jQuery UI button title

I'm changing an existing page that is encoded with ISO-8859-1 and I can't change its encoding to UTF-8.

I'm using jQuery UI Dialog to send some informations to user.

Everything is fine, except by the fact of some buttons have accented chars as bellow:

buttons: [
{
    text: "SIM!",
    click: function() { //'yes' button clicked }
}, {
    text:'NÃO',
    click: function() { //'no' button clicked }
}
]

When I display the dialog, the "NÃO" button becomes "NÃO" but the browser ignores the html entity and displays NÃO.

I also tried to put NÃO instead of NÃO, but didn't work.

Is there any way to properly display the accented à on a jQuery UI button?

UPDATE

After fight this problem all morning I saw what was going on... The CMS was changing only the javascript texts to HTML entities (It's the worst CMS I ever saw). I solved the problem creating a hidden div with the text I wished to put on button and used it, instead of just place an string, as bellow:

before:

buttons: [
{
    text: "SIM!",
    click: function() { //'yes' button clicked }
}, {
    text:'NÃO',
    click: function() { //'no' button clicked }
}
]

after:

    buttons: [
    {
           text: "SIM!",
       click: function() { //'yes' button clicked }
    }, {
       text:$("#badcms").html(),
       click: function() { //'no' button clicked }
    }
    ]
</script>
(...)
<div id="badcms" style="display:none">NÃO</div>

Upvotes: 4

Views: 2331

Answers (5)

Corey O.
Corey O.

Reputation: 476

the jQuery-UI Dialog has a solution for this. Instead of using the 'text' attribute, use the 'html' attribute like so:

buttons: [
    {
        html: "SIM!",
        click: function() { //'yes' button clicked }
    }, {
        html:'N&Atilde;O',
        click: function() { //'no' button clicked }
    }
]

Upvotes: 0

javsmo
javsmo

Reputation: 1337

As suggested on comments, I'm answering my own question.

After fight this problem during one entire morning, I saw what was going on... The CMS was changing only the javascript texts to HTML entities (It's the worst CMS I ever saw). I solved the problem creating a hidden div with the text I wished to put on button and used it, instead of just place an string, as bellow:

before:

buttons: [
{
    text: "SIM!",
    click: function() { //'yes' button clicked }
}, {
    text:'NÃO',
    click: function() { //'no' button clicked }
}
]

after:

    buttons: [
    {
           text: "SIM!",
       click: function() { //'yes' button clicked }
    }, {
       text:$("#badcms").html(),
       click: function() { //'no' button clicked }
    }
    ]
</script>
(...)
<div id="badcms" style="display:none">NÃO</div>

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201768

You need to convert (transcode) the file from ISO-8859-1 to UTF-8. A good editor can do this (e.g., Notepad++). Then just make sure that encoding is properly declared (an essential part of moving to UTF-8).

Upvotes: 1

Alex K.
Alex K.

Reputation: 175906

As .text escapes entities in any format, you could set the initial text to text:'NAO' then fetch the button and update its html;

$('.ui-dialog-buttonset').children('button:contains(NAO)').html("N&Atilde;O");

Although I suspect any subsequent manipulation of the buttons would reset this.

Upvotes: 0

steveax
steveax

Reputation: 17743

Why not encode the entity?

N&#195;O

Upvotes: 0

Related Questions