表单提交后关闭Colorbox iframe，然后重定向父页面 [英] Close Colorbox iframe after form submit and then redirect parent page

问题描述

我一直试图在几个星期内找出这个问题，只得到平庸的结果。由于我缺乏对Jquery的知识和最少的Javascript知识，所以我已经拼凑了一些在网络上发现的代码，我相信这是完全错误的。我正在使用Colorbox在iframe中显示带有添加到购物车按钮的产品（父级和iframe都是来自我的服务器的页面）。我想要的结果是：

（为清晰起见编辑）

1. 添加购物车按钮将表单数据传递给提交时的父级。


2. 在传递表单后关闭Colorbox iframe。 >父框架提交表单。

到目前为止，我在iframe中使用了以下代码：

 < form name =cart_quantityaction =index.php？action = add_productmethod =post
 enctype =multipart / form-dataonSubmit =parent。$。fn.colorbox.close（）;> 
< input type =hiddenname =qtyvalue =1/> 
< input type =hiddenname =idvalue =7/> 
< input type =hiddenname =attrivalue =17id =attri-17/> 
< input class =cssButton buttontype =submitvalue =ADD TO CART/> 
< / form> 
  

我的脚本在父页面上调用colorbox是：

 < script> 
函数lightbox（）{
 $ .fn.colorbox（{
 iframe：true，
 onClosed：function（）{window.location ='index.php？main_page = shopping_cart ';}，
 href：./ index.php？main_page = product_info& id = 7}）; 
} 
< / script> 
  

所以到目前为止的问题：

提交表单时，Colorbox关闭，表单仅提交一半时间（部分成功率）。我试图用萤火虫追踪发布的数据，试图看看它是否每次发布，但因为它来自iframe，我似乎无法看到任何东西。

如果有人能帮我解决这个问题，我会非常感激！

解决方案

您可以尝试添加延迟：

  onSubmit =window.setTimeout（function （）{parent。$。fn.colorbox.close（）;}，150）; 
  

将150更改为必要的值以确保发送请求。

详细了解setTimeout 此处 a>。

I've been trying to figure this one out for a couple of weeks now with only mediocre results. Due to my lack of knowledge of Jquery and minimal Javascript knowledge I have cobbled together a few bits of code found around the net and I'm sure it is all wrong. I am using Colorbox to display a product with an add to cart button in an iframe(both the parent and iframe are pages coming from my server). My desired results are:

(edited for clarity)

1. to have the add to cart button pass the form data to the parent on submit.
2. close the Colorbox iframe after passing form.
3. Parent frame submits form.

So far I have used the following code for the form in my iframe:

<form name="cart_quantity" action="index.php?action=add_product" method="post" 
enctype="multipart/form-data" onSubmit="parent.$.fn.colorbox.close();">
<input type="hidden" name="qty" value="1" /> 
<input type="hidden" name="id" value="7" /> 
<input type="hidden" name="attri" value="17" id="attri-17" />
<input class="cssButton button" type="submit" value="ADD TO CART"/> 
</form>

My script calling colorbox on the parent page is:

<script>
function lightbox(){    
  $.fn.colorbox({ 
  iframe:true,
  onClosed:function(){ window.location = 'index.php?main_page=shopping_cart'; }, 
  href:"./index.php?main_page=product_info&id=7"});
}
</script>

So the problems so far:

When the form is submitted Colorbox closes and the form submits only half of the time(partial success rate). I've tried to follow the posted data with firebug in an attempt to see if it's posting everytime, but because it is coming from an iframe, I can't seem to see anything.

if anybody can help me sort this out with the proper code, I'd greatly appreciate it!

解决方案

You could try and add a delay:

onSubmit="window.setTimeout(function(){parent.$.fn.colorbox.close();}, 150);"

Change the 150 to whatever value is necessary to make sure the request is sent.

Read more about setTimeout here.

这篇关于表单提交后关闭Colorbox iframe，然后重定向父页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！