Close a JQueryUI dialog works only one time

Question

I was looking at this answere jQuery how to close dialog from iframe within dialog? . I have the same situation ie a page that calls a jqueryui dialog in this way:

var message = '<div id="pickDialog"><iframe frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe></div>'

    $(message).dialog({
        modal: true,
        width: 'auto',
        title: 'Seleziona'
    });

In the Anagrafica page, when the user press a button I run another jqueryui dialog as follows

var message = '<div>Hai selezionato ' + value + '.</div><div>Confermi?</div>'

        $('<div></div>').html(message).dialog({
            modal: true,
            title: 'Conferma',
            buttons: {
                "Si": function () {
                    window.parent.setCodice(value);
                    $(this).dialog("close");
                    window.parent.closePick();
                },
                "No": function () {
                    $(this).dialog("close");
                }
            }
        });

Function closePick in main page is:

function closePick() {
    $('#pickDialog').dialog('close');
    return false;
}

This code works... but only first time! When I open the iframe id="pickDialog" the second time, when I press Si button the dialog doesn't close. The function closePick is executed and I haven't errore in Javascript console. What could it be?

Answer 1

I've solved this issue placing in the html page this

<div id="pickDialog" style="display:none"></div>

and then the jquery function becomes

function pickDialog() {
var message = "<iframe width="100%" height="100%" frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe>"    

    $("#pickDialog").dialog({
        modal: true,
        width: dWidth,
        height: dHeight,
        title: 'Seleziona'
    }).html(message);
}

The other code is unchanged. I don't know why but this solved the issue.