JQuery UI encoding nightmare

Question

I want to be able to pass any string to the buttons text in JQuery UI.

Suppose I have this string:

Ajouter L'amie a la liste "amies"

The only way to actually pass this text without causing a massive JavaScript error is by HTML-encoding it.

registerhtml.dialog({
        modal: true,
        title: 'My Dialog Title',
        resizable: false,
        buttons: [
            {
                text: 'Ajouter L'amie a la liste "amies"',
                click: function(){
                    // Do something important
                    $(this).dialog('close');
                }
            },
            {
                text: 'Cancel',
                click: function() {
                    $(this).dialog('close');
                }
            }
        ]
    });

But I'm no getting any Human-Readable text in the button. Only the same encoded text.

Is there a quick way to solve this issue? Maybe there's an option that I'm missing in the button object.

Or should I put my gloves, call a nurse and start surgery in the JQuery-ui.js file?

Answer 1

To be able to use htmlentities, you'll have to use the html method when inserting the strings into the buttons, as text will literally insert the text without doing encoding of entities :

registerhtml.dialog({
    modal: true,
    title: 'My Dialog Title',
    resizable: false,
    buttons: [
        {
            html: 'Ajouter L'amie a la liste "amies"',
            click: function(){
                // Do something important
                $(this).dialog('close');
            }
        },
        {
            html: 'Cancel',
            click: function() {
                $(this).dialog('close');
            }
        }
    ]
});

FIDDLE