I had a similar problem, having a jQuery Dialog inside an UpdatePanel. As I could read on different sites, the problem is caused by duplicates inside the DOM tree.
In the end I found a very simple solution. I assign the dialog to the div, then open or close it by JavaScript and then run this little peace of code to remove the duplicates:
var count = $(".dialog").length;
for (i = 1; i < count; i++) {
$(".dialog").first().remove();
}
EDIT: it turned out not to be SO simple. In the end, my code looked like this:
In document ready (and also asynchronous page calls):
function AddDialog() {
var dlg = $(".dialog").dialog({ autoOpen: false });
dlg.parent().appendTo($("form:first"));
var targetSelector = ".myDialog"; // watch out: can't use ID here!
if (mustOpenDialog) {
$(targetSelector).last().remove(); //-- remove last copy
var dlg = $(targetSelector).dialog({ autoOpen: true });
var count = $(targetSelector).length;
for (i = 1; i < count; i++) {
$(targetSelector).last().remove();
}
}
if (mustCloseDialog) {
$(targetSelector).dialog("close");
var count = $(targetSelector).length;
for (i = 1; i < count; i++) {
$(targetSelector).first().remove();
}
}
}
In my complete code, mustOpenDialog and mustCloseDialog are set in codebehind.
answered 2011-01-14T17:58:51.933