Question

I’m trying to open a jQuery dialog using AJAX. The content of the dialog is loaded from a querystring and contains server controls inside a form tag.

I have a GridView where a link in each row spawns the dialog.

The first time, the dialog loads fine, but subsequently I need to open another dialog on the page, then the first dialog will load. I can’t open the same dialog subsequent times. Inspecting the DOM in Firebug shows multiple ‘containers’ at the end of the page. I have a GridView where one column contains a link and an empty div. I’ve simplified the control IDs because they’re mangled by ASP.NET, but this is my code:

$('#linkId').click(function() {
    $('#panelId').dialog({
            autoOpen: true,
            height: 600,
            width: 680,
            modal: true,
            show: 'blind',
            hide: 'blind',
            title: 'More Information',
            open: function () {
                $(this).load(url).parent().appendTo("form");
            },
            close(){
                // I've also tried using these (not both at the same time)
                $(this).dialog('destroy').remove();// dialog never opens again
                $(this).dialog('disable').remove();// dialog never opens again
            }
        });
        return false;
    });
});

I’ve tried adding the included functions to the close event, but I get the same effect. Otherwise, when the dialog eventually opens, everything works perfectly (despite there being multiple dialog containers at the end of the page).

Answer 1

From the jq dialog api documentation:

“If you want to reuse a dialog, the easiest way is to disable the
“auto-open” option with: $(foo).dialog({ autoOpen: false }) and open
it with $(foo).dialog(‘open’). To close it, use
$(foo).dialog(‘close’). A more in-depth explanation with a full demo
is available on the Nemikor blog“