jQuery dialog with <object>, cannot call dialog('close') from within object document

Question

I have the following situation on a web application.

A dialog is built and opened on the fly when clicking on a link:

var dialogInitiator = $("<div id='dialog-initiator' style='background-color: "+bgcolor+";'>Loading...</div>");
dialogInitiator.appendTo(parentFrame);
dialogInitiator.dialog({
    modal:true,
    autoOpen: false
}).on('keydown', function(evt) {
    if (evt.keyCode === $.ui.keyCode.ESCAPE) {
        dialogInitiator.dialog('close');
    }
    evt.stopPropagation();
});
dialogInitiator.dialog('open');

Right after that, I load a new html page into the dialog, with an < object >, like this:

var objectFrame = $('<object style="border: 0;width:'+(dlwidth-30)+'px;min-height:'+(dlheight-46)+'px;" type="text/html" style="overflow:auto;" data="'+url+'"></object>');
dialogInitiator.html(objectFrame);

Now, the "url" variable contains a link to this new html document. When that page is ready, it will focus on an input field. This prevents the ESCAPE key from closing the dialog. So, I am trying to manually trigger the .dialog('close') event on escape keypress.

I do the following, from within the loaded document:

$('#dialog-initiator', window.parent.document).dialog('close');

It get the following error:

"Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"

Strange thing is, when i call:

console.log( $('#dialog-initiator', window.parent.document).html() ); it shows me the html from the dialog. So it actually IS initiated.

Well, I have tried to fix this error with the help of Google, but without success. I guess my situation is quite specific.

Note: we are forced to use the technique with loading this whole webpage into the dialog due to older functionality we used in modalDialogs. Since they are depricated in the latest Google Chrome, we've built a temporary solution with jQuery dialog.

I hope someone can help me out. I appreciate it!

Answer 1

You can try a global method created after the modal is created

dialogInitiator.dialog({
    modal: true,
    autoOpen: false,
    create: funtion(e,ui) {
        window.closeMyDialog = function() {
            $('#dialog-initiator').dialog('close');    
        };
    }
})...

Then call it by doing window.parent.closeMyDialog(); .

Answer 2

Why not use JQuery UI? It's easier than making your own.

http://jqueryui.com/dialog/#default