Close iframe fancybox when child page submitted and reload parent page

Question

I have iframe fancybox on my page. On the child page, I add something to DB when Add Button clicked. After this process I want to close the fancybox and reload the parent page. How can I do it?

Answer 1

this should be called on page reload..

   window.parent.closeDialogFormSubmit();

   //Or

   window.top.parent.closeDialogFormSubmit();

this closeDialogFormSubmit function should be on fancy box open on that page. closeDialogFormSubmit write code for fancy box close code.

the function should be written outside $(document).ready(function(){}); or $(function(){}); else it will not find the function and gives error undefined.

Answer 2

1). In the child page

Use the API method parent.$.fancybox.close()

You could create a button like :

<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>

Bear in mind that interaction between those pages is subject to the same origin policy so if the child page is in another domain parent.$.fancybox.close() may not work.

EDIT : if the child page should be closed after a form is submitted, then set the closing method using the onsubmit attribute in the form tag like :

<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">

See this post for further reference and demo.

2). In the parent page

Add to your custom script the afterClose callback like :

$(".fancybox").fancybox({
    afterClose : function() {
        location.reload();
        return;
    }
});

... to reload the page after closing fancybox. See JSFIDDLE