CODEWITHSUNDEEP
javascriptjquery
user505210
user505210

Reputation: 1402

changing jquery ui dialogue title

I have this fiddle http://jsfiddle.net/cdG94/2/ in which I am trying to change the jquery UI dialogue title..It works fine when I am using Jquery 1.9 or lower but when I go to higher library it just displays the HTML directly ..am I doing something wrong here .I am using Jquery 1.10.2 and jQuery UI - v1.10.3

<button id="opener">Open the dialog</button>
<div id="wrapper">
<p>Some txt goes here</p>
</div>

$('#wrapper').dialog({
    autoOpen: false,
    minHeight: 400,
    minWidth: 600,
    title: function () {
                   return "Testing&nbsp<span style=\"font-size:smaller;\">Testing the HTML .</span>";
               }
});
$('#opener').click(function() {
    $('#wrapper').dialog('open');
    return false;
});

Thanks

Upvotes: 3

Views: 1780

Answers (3)

Alnitak
Alnitak

Reputation: 339786

In jQuery UI 1.10 they changed the title option so that it uses .text() instead of .html() to set the dialog's title:

From the jQuery UI 1.10 release notes:

Changed title option from HTML to text

(#6016) Dialog titles are controlled either via the title option or the title attribute on the content element. The title has previously been set as HTML, but since titles are generally plain text, this could easily cause a scripting vulnerability for users who don't realize the value is being set as HTML. As a result, titles are now set as text. If you need to add custom formatting to your dialog titles, you can override the _title() method on the dialog.

To revert to the original behaviour you can therefore do this, per the jQuery UI team's recommendation:

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function (title) {
        if (!this.options.title) {
            title.html("&#160;");
        }
        title.html(this.options.title);
    }
}));

but do beware (if you allow user supplied input to appear in the titles) of the potential for XSS vulnerabilities that was the original reason for the change!

(demo at http://jsfiddle.net/alnitak/bJ47w/)

Upvotes: 3

zur4ik
zur4ik

Reputation: 6254

As far as title option changed from html to text, you can adjust small hack to face html content in jQuery UI dialog window title.

This is not best practice, but maybe a solution sometimes. Here is an example:

Trigger a function, when dialog is created and manually change title .html

$('#wrapper').dialog({
    autoOpen: false,
    minHeight: 400,
    minWidth: 600,
    create: function () {
        $('#wrapper').prev().html($('#wrapper').prev().text());
    },
    title: function () {
        return "Testing&nbsp<span style=\"font-size:smaller;\">Testing the HTML .</span>";
    }
});
$('#opener').click(function () {
    $('#wrapper').dialog('open');
    return false;
});

Here is fiddle: http://jsfiddle.net/zur4ik/cdG94/8/

Upvotes: 3

mayabelle
mayabelle

Reputation: 10014

Like others said, the newer version of JQuery UI doesn't use HTML.

However, it looks like you are just trying to make the text smaller. Why not do this using CSS:

.ui-dialog-title{
    font-size: smaller !important;
}

Upvotes: 0

Related Questions