CODEWITHSUNDEEP
jqueryjquery-uihtml-encodehtml-escape-characters
Adrian Salazar
Adrian Salazar

Reputation: 5319

JQuery UI encoding nightmare

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?

Upvotes: 4

Views: 2794

Answers (2)

adeneo
adeneo

Reputation: 318312

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

Upvotes: 8

Stefan
Stefan

Reputation: 14873

Depending if you use ' or " for your string, escape all accournces of ' ör " in the string with a \

Example:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery-1.8.2.min.js"></script>
        <script src="jquery-ui-1.9.0.custom.min.js"></script>
        <link href="jQueryUI_css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
        <script>
            $(function(){

                //using ' to define a string
                var text = 'Ajouter L\'amie a la liste "amies"'
                $('div').text(text).button();

                //using " to define a string
                var text2 = "Ajouter L'amie a la liste \"amies\"";
                $('button').text(text).button();
            });
        </script>
    </head>
    <body>
    <div></div>
    <button></button>
    </body>
</html>

Upvotes: 0

Related Questions