Poof! Gone

When you generate a dialog from part of your webpage, you'll notice that when you open the dialog that text disappears from the page and shows up in your dialog. Once you close that dialog, however, your text is gone.

jQuery UI actually takes the content you want to create a dialog from, wraps it in all kinds of divs to make sure it renders correctly and then places it at the bottom of your page. Hidden. Until you either open the dialog or the dialog auto-opens.

So how do you prevent that from happening? How do you keep the content on your page without jQuery UI moving it around?

Option 1: use jQuery Extractor

If you actually want to remove the content from the page, but you want jQuery UI to put it back when the dialog is closed, use jQuery Extractor.

This scenario is exactly why I created jQuery Extractor in the first place.

Option 2: copy before you pop

So you've got this HTML you want to load into a dialog.

    <div id="mydialog" title="My dialog!">
        Oh, hi!
    </div>

The easy way that does not work if you want to get your content back:

$('#mydialog').dialog();

So why don't we just make a copy of the HTML and load that? Now, be careful! Like we said before: the HTML is actually still part of the page. So when you're using an id attribute to identify the part you want to load, you'll get multiple elements with the same unique identifier. That's no good.

We've got to think a bit ahead. Let's adapt the HTML.

    <div id="mydialog-wrapper">
        <div title="My dialog!">
            Oh, hi!
        </div>
    </div>

We introduced a wrapper we can use to identify the HTML fragment we want to display in a jQuery UI dialog.

var dialogHtml = $('#mydialog-wrapper').html();
$(dialogHtml).dialog();

And that's the final part of the puzzle. We take the contents of our wrapper and wrap that HTML in a jQuery object which comes down to making a copy of that HTML. Then we call jQuery UI's dialog method on that instead of the original.