Close ColorBox iFrame after submit

Question

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 refresh automatically.

Please help me out.

score 37 · Accepted Answer · edited Apr 28 '10 at 19:59

37

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();

edited Apr 28 '10 at 19:59

mpen

237,624
230
766
1,119

answered Mar 29 '10 at 07:02

nik

3,669
3
19
32

1

@nik is there anyway to pass a parameter to the onClosed method? – Anthony Feb 13 '13 at 17:44
Sorry @Anthony for late reply, coming here in sc after long time. you can always call a function on parent window from your iframe like: window.parent.functionInParent('myData'); just before parent.$.fn.colorbox.close(); – nik Feb 18 '13 at 13:33

score 3 · Answer 2 · answered Jan 06 '10 at 00:09

3

After the form is submitted in Frame 1, you can use the following JavaScript to reload the parent frame:

window.parent.location.reload(true);

answered Jan 06 '10 at 00:09

barsh

441
5
16

where i have to write this?n that i frame or on parent html? and i think this is not working in jquery colorbox – diEcho Jan 13 '10 at 00:46
I used this on a close button in a colorbox and it worked great: closed the iframe and reloaded the parent page. – Max Williams Jul 07 '11 at 15:21

score 2 · Answer 3 · answered Apr 28 '10 at 19:56

2

<form target="_top">

answered Apr 28 '10 at 19:56

Amien

904
2
10
18

score 2 · Answer 4 · edited Nov 30 '11 at 14:50

2

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();
  }
});

edited Nov 30 '11 at 14:50

John Conde

207,509
96
428
469

answered Nov 30 '11 at 14:42

Rohan4

21
1

2

modifying the raw source sounds like a bad idea – Paul Tyng Jan 12 '12 at 16:12

score 1 · Answer 5 · answered Jun 12 '12 at 09:24

1

Just simply simulate a click on the close button, like this:

$("#cboxClose").click();

answered Jun 12 '12 at 09:24

Lilla

31
3

this is the only one working for me. very clever. the other solutions apparently are not valid because you can only close a colorbox with the same Javascript that opened it. – Mau Sep 05 '14 at 01:01

score 1 · Answer 6 · edited Dec 05 '12 at 23:26

1

Give form tag like this:

<form target="_top">

then after submit:

response.redirect("your form")

edited Dec 05 '12 at 23:26

Ruben Bartelink

55,135
22
172
222

answered Dec 01 '10 at 07:34

karthik

11
1

jalalkhan121 · Answer 7 · 2013-03-19T06:39:26.040

0

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...

edited Mar 19 '13 at 06:39

answered Mar 13 '13 at 13:28

jalalkhan121

67
1
6

please edit your post and format the code to make it readable – kleopatra Mar 13 '13 at 13:45

score 0 · Answer 8 · answered Dec 21 '11 at 17:21

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 :)

Close ColorBox iFrame after submit

8 Answers8

Linked