August F.Y. Chao

Archive for 七月, 2009

Jquery UI Dialog Close within iframe

In 02 備忘錄 on 七月 29, 2009 at 7:26 午後

JQuery UI dialog close

December 17th, 2008 Posted in Web 2.0

We have a lot of situations to close a JQuery UI dialog from the dialog itself other than using the default close button. But the fuction dailog(”close”) will not work from the iframe since JQuery doesn’t support cross-window operations.

I am loading a Jquery UI dialog and inside it an iframe to show a form. After posting the forum via ajax I analyze the response and want to close the dialog (born from the parent window) or need to close the dialog when clicking on a “Cancel” button.
I have solved this problem by creating a method on the parent window that will close the dialog and then call that method from the child window.

Cancel button & onclick code inside the dialog iframe

<input name=”cancel” type=”button” value=”Cancel” onclick=”$(parent.document).find(’#closedailog’).trigger(’click’);” />

Code in parent window

<input id=”closedailog” name=”closedialog” onclick=”$(’.ui-dialog-titlebar-close’).trigger(’click’);” type=”submit” style=”display:none”/>

Put the parent window code any where in the parent window. The code will just trigger the click event of the dialog’s close button and will work better than using the function dailog(”close”) function.