Build up jQuery-UI dialogs on the fly

application.js

// Creates a jQuery UI dialog on the fly, every time a link .user-link is clicked,
// dialog content will be loaded from the url specified by the clicked link

$(function(){
    $(".user-link").live('click', function(){
      var link = $(this);
      $("<div><img src='" + BASEPATH + "images/small-spinner.gif' />  </div>")
        .dialog({
          autoOpen: true, //for info, true is default
          modal: true,
          title: 'Apps used by ' + link.attr('data-name'),
          width: '720',
          minHeight: '400',

          open: function(){
            $(this).load(link.attr('href'));
          },
          close: function(){
            $(this).dialog('destroy');
            $(this).remove();
          }
        });
      return false;
    });
}

Reason for remove: dialog('destroy') only removes the dialog surroundings, but leaves the div in the DOM, which may be problematic if there are elements with an ID in the HTML that need to be unique when another dialog is opened