Closing a jquery modal dialog from a remote page

Question

Hi all,

I'm using the jQuery-UI dialog widget in a Grails-based application to load a remote page (in this case, a simple file upload form). The remote page is defined elsewhere in my project, and doesn't know it is being loaded in a dialog.

Is there any way to close the dialog via a link in the remote page? Would I have to somehow pass a reference to the dialog when I load the page, or is there a way to trigger the close event while remaining agnostic of the dialog itself?

Answer 1

If you give your dialog a known ID then you can look it up using jquery (e.g. $('#mydialog') and close it via script on the remote page. The only issue might be getting JS to be evaluated when the remote page is loaded into the dialog.

Answer 2

Try this HTML:

<a href="#" id="btnDone">CLOSE</a>

and this JavaScript:

$("#btnDone").click(function (e) {
e.preventDefault();
var dialogDiv = $("#btnDone").parents(".ui-dialog-content");
if (dialogDiv.length > 0) {
dialogDiv.dialog('close');
}
});

in your remote page. It will look to see if it is inside a dialog and if so, it will close it. If not, it will do nothing.