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

Harry · Accepted Answer · 2013-01-23 20:28:49Z

80

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("&#160;");
        } else {
            title.html(this.options.title);
        }
    }
}));

answered Jan 23, 2013 at 20:28

Harry

3,1362 gold badges25 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

relipse Over a year ago

thanks, at one point i was setting the html manually via attributes, that fixes this problem, thanks

luzmcosta · Accepted Answer · 2014-03-21 21:45:22Z

15

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.

edited Mar 21, 2014 at 21:45

answered Oct 24, 2013 at 22:02

luzmcosta

3142 silver badges6 bronze badges

7 Comments

Rudy Over a year ago

If you use open it will keep appending. In this case the create is the right event. api.jqueryui.com/dialog/#event-create

321X Over a year ago

Whether or not you'd use the create function, ADD a scope of somekind!! e.g.

create: function () {                    $(this).siblings().find(".ui-dialog-title").html('<strong>my html title</strong>'); }

luzmcosta Over a year ago

@Rudy Create would do it too, but open was what worked best in that particular case. Whether using open, create, or some future, yet-written option, the method of choice for this is more about the particular implementation...unless there's something I'm missing about open that makes this a serious no-no. If there is, do tell.

luzmcosta Over a year ago

@321X Agreed. I cut off too much in trying to create a simple example. I'm editing my response now. TY for catching it.

logic8 Over a year ago

I had to wrap it in a setTimeout, but it works -- thanks!

|

trank · Accepted Answer · 2019-03-05 09:58:17Z

1

This will modify the title after init the dialog

$('#element').dialog(options);

var dialogTitle = $('#element').closest('.ui-dialog').find('.ui-dialog-title');
dialogTitle.html('<strong>hello world</strong>');

answered Mar 5, 2019 at 9:58

trank

1,06212 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Linked

Related