提交后刷新整个页面（Fancybox）

Question

I have a page where the user will click the button then a fancybox popup will appear and in there is a php file that has all the fields you can update. What I want to happen is that after I press the update button the whole page will refresh and will close the popup. But what's happening is that after I press update only the popup refreshes. How could I do that?

in this page is where I echo all of the user info

emp_refer.php

       <a id="various5" href="http://i-refer.elitebpocareers.com/refer/updateInfo.php">
                    <button class="button">Edit Personal Information</button>
                </a>


        <SCRIPT TYPE = "text/javascript">

        $("#various5").fancybox({
         'width'             : '75%',
         'height'            : '75%',
         'autoScale'         : false,
         'transitionIn'      : 'none',
         'transitionOut'     : 'none',
         'type'              : 'iframe'
        });

        </SCRIPT>

Then in the page 2 after the update I do this code and the popup only refreshes

echo "<meta http-equiv='refresh' content='0; url=emp_refer.php'>";

Answer 1

What you could do is :

In page 2, after the update run the fancybox.close() method instead of the meta tag like :

echo "<script>parent.jQuery.fancybox.close();</script>";

Then, in your fancybox initialization script (emp_refer.php page) add the onClosed callback to your API options and run location.reload() within it like :

$("#various5").fancybox({
    'width': '75%',
    'height': '75%',
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'iframe',
    'onClosed': function () {
        location.reload();
        return;
    }
});

NOTE: if you are using fancybox v2.x use the afterClose callback