Using HTML in a Dialog's title in jQuery UI 1.10

Question

http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text

jQuery UI 1.10 made it so that the dialog title can only be text (no html) to prevent scripting vulnerabilities. I'm not allowing user input to generate this title, so I would still like to use HTML, mainly to display an icon to the left of the title.

I'm going to post my solution to this problem because I haven't seen anyone else ask or answer this yet. Hopefully it will help someone else, or someone else may have a better approach.

More info as to why they did it: http://bugs.jqueryui.com/ticket/6016

Answer 1

This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML.

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

Answer 2

If you hesitate to override jQuery's _title method, you can use the html, append, or similar methods on the title element at the jQuery dialog's open event, like so:

$("#element").dialog({
  open: function() {
    $(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
  }
});

The above parses the HTML correctly while bypassing jQuery's title method. And since it happens at the open event, the user experience remains seamless. Just did this on a project, and it worked beautifully.