Close ColorBox iFrame after submit
I'm using jQuery ColorBox
to display a shopping cart item. When a user enters the quantity in the iFrame (opened with colorbox) and clicks on the submit button, I want the iFrame to be close and main window (parent) to be refreshed automatically.
I mean I want two things after submitting data on iFrame:
- iFrame closes automatically.
- Parent window getting 开发者_如何学Pythonrefresh automatically.
Please help me out.
use this on the parent window while opening iframe:
$(document).ready(function(){
$(".chpic").colorbox({width:"80%", height:"80%", iframe:true,
onClosed:function(){ location.reload(true); } });
});
and this to close the iframe inside iframe page:
parent.$.fn.colorbox.close();
After the form is submitted in Frame 1, you can use the following JavaScript to reload the parent frame:
window.parent.location.reload(true);
<form target="_top">
open jquery.colorbox.js find these two pieces of code:
$close.click(function () {
publicMethod.close();
});
$overlay.click(function () {
if (settings.overlayClose) {
publicMethod.close();
}
});
replace with these - note the addition of " window.location.reload();"
$close.click(function () {
publicMethod.close();
window.location.reload();
});
$overlay.click(function () {
if (settings.overlayClose) {
publicMethod.close();
window.location.reload();
}
});
Just simply simulate a click on the close button, like this:
$("#cboxClose").click();
Give form tag like this:
<form target="_top">
then after submit:
response.redirect("your form")
If you're using Drupal 7, you may need to use the following alternative:
parent.jQuery.colorbox.close();
In D7, the $.fn seems to be replaced by the jQuery object.
I simply setup a menu callback which simply returned this:
return <<<EOF
<script type="text/javascript">
<!--//--><![CDATA[//><!--
parent.jQuery.colorbox.close();
//--><!]]>
</script>
EOF;
Seemed to work fine for me :)
If you want to stay on current page :
write the following code on parent page where colorbox is applied.
$(document).ready(function(){ $(".tu_iframe_800x600").colorbox({width:"80%", height:"100%", iframe:false }); });
and the following code on your current page where you want to close colorbox
parent.$.fn.colorbox.close();
Note: please replace .tu_iframe_800x600
with your html class on which the colorbox is called...
精彩评论