Close Colorbox iframe after form submit and then r

问题:

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!

回答1:

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.