Question : jQuery UI Dialog with ASP.Net Postbacks

Hello,
I'm using the jQuery UI dialog with my web application and I'm having issues. I'm trying to open the dialog using the following function:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
function show_dialog(dialog) {
    $('div#' + dialog).dialog({
        modal: true,
        draggable: false,
        resizable: false,
        autoOpen: true,
        open: function(type, data) {
            $(this).parent().appendTo('form');
        }
    });
}

I have search around and they suggested adding the parent().appendTo('form'). This works but after opening the dialog the first time, then proceeding to close it, once I try to open that same dialog again, it opens with two instances so now I have to close it twice. This gets incremented every time I try and open the same dialog without a postback in between.

I have tried other various solutions like destroying the dialog reference to the div, and removing the div from the form when it's closed but to no avail.

Does anyone have any suggestions or has run into this problem before?

Answer : jQuery UI Dialog with ASP.Net Postbacks

I figured it out, I expanded a little bit on my show_dialog function, as shown below. If I call it from the code behind, I set the 'fromCode' parameter to true. It then proceeds to remove any extra div's that were created leaving only one. This was my issue with multiple instances opening, there were multiple divs on the form.

I don't know if this is the most efficient way of doing it, but it solved my issue and everything is working good.

Thanks blaser for pointing me in the right direction.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:



function show_dialog(dialog, fromCode) {
    var $dlg = $('div#' + dialog);
    if (!is_defined(fromCode) || fromCode === null) {
        fromCode = false;
    } else if (fromCode) {
        if ($dlg.length > 1) {
            $dlg.each(function(i) {
                if (i === 0) { i++; }
                else { $(this).remove(); }
            });
        }
    }

    $dlg = $('div#' + dialog);

    $dlg.dialog({
        modal: true,
        draggable: false,
        resizable: false,
        autoOpen: true,
        open: function(type, data) {
            $(this).parent().appendTo('form');
        },
        close: function(event, ui) {
            $(this).dialog('destroy');
        }
    });
}