Wednesday, May 27, 2009

jQuery UI scoped themes and the Dialog widget

There's a problem using scoped themes with jQuery UI's Dialog widget in the 1.6 and 1.7 releases (and possibly 1.7.1 as well).

Christoph Herold mentioned his workaround - wrapping the dialog's DOM with a scoping div (with the scoped theme's class name). I wrote a small jQuery plugin that does this and works fine so far:

// Wraps the dialog in a div with the scoping class on
// dialog open, removes the scoping class on dialog close
$.fn.dialogScopingWorkaround = function(scopingClass) {
  this.bind('dialogopen', function(event, ui) {
    $(this).parents(".ui-dialog").wrap(
      '<div class="dialogScopingWrapper '
      + scopingClass
      + '"></div>'
    );
  });
  this.bind('dialogclose', function(event, ui) {
    var wrapper = $(this).parents(".dialogScopingWrapper");
    wrapper.replaceWith(wrapper.children());
  });
  return this;
};

Example with the "smoothness" theme scoped with class "theme-smoothness":

$('#dialog').dialogScopingWorkaround("theme-smoothness").dialog();

// Must call the workaround before opening the dialog
// so the 'dialogopen' event is bound.