正确整理jQuery对话框

Question

I hit a problem when using jQuery's Dialog widget...

I have a solution, but wondered if there was a more standard way (or I had mis-understood something):

Background

I have a web site that makes heavy use of AJAX, in that most of the time only portions of the page are updated. One portion of the page contains some JS that opens a dialog. When flipping between that portion and another, on opening the dialog for a second time things get messed up.

Reason

$el.dialog() removes the DOM element that is to become the popup ( $el[0] ) from its original place in the document hierarchy and appends it to the document body instead. When I then remove the popup element's original parent element, the popup element doesn't get removed.

This then means that doing this (changing / removing that portion of the page and then changing it back) all again results in duplicate element IDs which unsurprisingly confuses the hell out of the dialog widget.

Solution

I have come up with a solution that overrides the $.fn.dialog function and makes use of jQuery special events . It attaches a listener to the custom event 'destroyed' on the original parent element, the 'destroyed' event is triggered when jQuery removes any element, the listener reacts to this event by removing the popup element wherever it now might be in the document heirarchy.

Here it is:

(function($) {

   $.event.special.destroyed = {
        remove: function(o) {
            if (o.handler) {
                o.handler.apply(this, arguments);
            }
        }
    };

    var originalDialogFn = $.fn.dialog;

    $.fn.dialog = function(firstArg) {
        if (!this.data('dialog') && firstArg != 'destroy' && !this.data('dialogCleaner')) {
            this.data('dialogCleaner', true);

            var $parent = this.parent();
            var $dialogEl = this;

            $parent.bind('destroyed', function(e) {
                if (this == $parent.get(0)) {
                    $dialogEl.remove();
                }
            });
        }

        return originalDialogFn.apply(this, arguments);
    };

})(jQuery);

Are there any better ways of doing this? It seems like a slight flaw in the way the jQuery dialog works, in that it's not that easy to tidy it up nice and generically .

Of course I am aware of the dialog('destroy') method but doesn't seem particularly easy to hook that into my page fragment/portion handling.

Answer 1

You could do what I do in these situations. Capture the parent element prior to making the dialog and then, after the dialog is created, detach it from the DOM and re-append it back to the parent element.

var dlg = $('selector.dialog'),
    dlgParent = dlg.parent();

dlgParent.append(dlg.dialog().detach());

This works especially well when dealing with ASPX forms (because any server-side tags that I need to get a postback value from must remain within the form).