JQuery UI dialog open – good practices

JQuery dialog is popular plugin, but sometimes it doesn’t work as we want to. I had a situation where my modal window pop up always third time and I had no idea why… Event for my button was binded well and popUpWindow() function execute every time, but function had strange behaviour. The code looked like this:

 
function popUpWindow(id, title, containerId) {
    $('#' + id).dialog('destroy');
    $('#' + id).dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        title: title,
        open: function (event, ui) {
            $('#' + id).append("simple Div Tag");
            $('#' + id).parent().appendTo($("form"));
        },
        close: function (event, ui) {
            $('#' + id).parent().appendTo($('#' + containerId));
            $("body").css("overflow", "auto");
        }
    });
    $('#' + id).dialog('open');
    $('#' + id + " input:text:visible:first").focus();
}

Function worked fine everywere else except a one particular userControl – so fixing the bug was quite difficult. The solution was to hold the modal div in a variable, so new function takes the form:

 

function popUpWindow(id, title, containerId) {
  
    var divObj = $('#' + id);
    divObj.dialog('destroy');
    divObj.dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        title: title,
        open: function (event, ui) {
            divObj.append("simple Div Tag");
            divObj.parent().appendTo($("form"));  
        },
        close: function (event, ui) {
            divObj.parent().appendTo($('#' + containerId));
            $("body").css("overflow", "auto");
        }
    });
    divObj.dialog('open');
    $('#' + id + " input:text:visible:first").focus();
}

Hopefully this helps someone saving some time.