How to add an image to the ui-dialog-titlebar in JQuery?

Question

It is possible to add an image to the ui-dialog-titlebar into a dialog box?.

Answer 1

It sure is. Making it look pretty in terms of sizing and alignment will be the tricky part. But placing an image in the titlebar should be as simple as:

$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

Edit:
Building on what Nick said below (cheers), if you wanted to be really hardcore, you would place the code inside the open event of the dialog, ie:

$(".putSelectorHere").dialog({
  open: function(event, ui) {
    $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
  }
});

Click for relevant docs.

Answer 2

if you use

 $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

on open event then first remove felix.gif

$(".ui-dialog-titlebar").remove("#myNewImage");

because if you open dialog box more than once it will add same image more than once or destroy dialog box