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'>";
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