Question

I’ve got a plug-in I’m working on which fetches a portion of a remote page, and saves that portion to be used in a jQuery UI dialog widget; originally I was attaching the HTML to the DOM and hiding it with display:none until it was called with $.dialog but I realized I could just leave the DOM node in a variable.

Is there any reason not to do this? Here’s an example:

function makeDialogLink() {

    var HTML = $("<div />").load('file.html #container', function() {

        $('a#test').bind('click', function(e) {
            e.preventDefault();
            showDialog();
        }); 
    });

    function showDialog() {
        $(HTML).dialog({
            autoOpen : true,
            width  : opts.width,
            modal  : opts.modal,
            resizable : opts.resizeable,
            title  : opts.title
        });

        // some other stuff happens in here, and a setTimout
        closeDialog();
    }
    function closeDialog() {
        $(HTML).dialog('close');
    }
}

I’ve simplified this quite a bit from what I’m actually doing, but this encapsulates what my question is about pretty well.

As you can see I’ve loaded a portion of a remote document, I pop it up in a dialog, and close that dialog later, but I never directly attach the fetched HTML to the DOM ($.dialog does it at some point, of course).

Is there any reason to NOT do it this way? Seems a lot nicer then having to shove the HTML into a hidden DIV and then fetch it later. I’m just wondering if there’s some pitfall I’m unaware of to using closures in javascript in this fashion.

Answer 1

I can’t think of any serious drawbacks to that. It may be a bit slower, since it’s reattaching it to the DOM every time you need a dialog but it doesn’t really matter since 1) the difference would not even be noticeable unless you’re popping up hundreds of dialogs and 2) it may not be that much slower, if at all, than having a div that you toggle.

It seems like the best and cleanest solution. I would keep it if I were in your position.