how to close colorbox within iframe?

Question

i have a page manageGroup.php, where user can also add member to group. I used colorbox to show the addGroupMember.php. Now i need to close that colorbox once i have done submitting the form.

javascript i am using in manageGroup.php

<script language="javascript" type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
 });
</script>

The link i am using to open colorbox

<a class="iframe" href="addGMember.php?id=<?php echo base64_encode($fetch->g_id)?>">Add Member</a>

the code in addGroupMember.php is like this:-

if($_POST['add']=="Go")
{
  $gid = $_POST['id'];
  $ii=0;
  $insert = "INSERT INTO ".DBGMEMBER." (gm_g_id,gm_m_id) VALUES ";
  foreach($_POST['gMember'] as $gMember)
  {
    if($ii==0)
    {
        $insert .= " ('".$gid."' , '".$gMember."')";
    }
    else
    {
        $insert .= " ,('".$gid."' , '".$gMember."')";   
    }
    $ii++;
  }
  $db->execute($insert);// after this i want to close the colorbox
  echo "<script>parent.$.fn.colorbox.close(); </script>";// code i used, but not working
}

Answer 1

This one worked out perfectly for me and should work for you

parent.jQuery.colorbox.close()

Answer 2

i got it done for me, a bit crazy way, anyways u can too give it a try.

Supposing your page in iframe as x.php having form named xyz

<?php
  if($_post['submit']=='Submit')
  {
    //some php code here
    if(success)
     echo "<script>parent.$.fn.colorbox.close(); </script>";
    else
    {
      //some error handling here;
    }
  }
?>
<form name='xyz' action='x.php'>
 //some html code here
 <input type='Submit' name='submit' />
</form>

Answer 3

First: Elaborate you question. The information you provided is some what shorthanded. There's no chance one could grip what you are doing. Also include some more sample code.

Only thing I could guess is that you trying to trigger the method in how it's written. Everything you add to the $.fn object is bound to all jQuery objects.

// doesn't work
$.fn.colorbox.close()
// proper way
$('idOfDomElement').colorbox.close()

..fredrik

Answer 4

Make sure that the page loaded within the iFrame. All of the necessary references to the colorbox js, jQuery js are not needed.

Then the parent close call will work:

parent.$('.yourElement').colorbox.close();

Answer 5

just this

parent.$.colorbox.close()

seems to work for me!

I used it like this without even a reference to any JS in the file loaded into the iframe.

  <a href="javascript:parent.$.colorbox.close()">close</a>

this alone in a blank HTML file seems to work.

Answer 6

I think the problem is that the colorbox belongs to the parent, not to the DOM in the iframe.

My guess is you'll need to call parent.[way to get the element or $.fn object].colorbox.close() or you'll need to add a function to the parent document and call parent.myCloseFunction()

Answer 7

I just tried to close colorbox from within the iframe but couldn`t get it to work. I used $('#closebox').colorbox.close() and without any luck.

Answer 8

There is a simple solution actually which i use.

i put this <a id="btnDone" href="#">here</a> inside code or you can use your submit button's id and

 $(document).ready(function () {
        $("#btnDone").click(function () {
            window.parent.location = "../siparisler/listele.aspx"
        });
 }

this way u can redirect the parent page. and colorbox is automatically close. if you dont need redirection just put "#" for the window.parent.location

Answer 9

I did not manage to close the Colorbox with suggested solutions. I get parent undefined... So..

---

I found took a different approach:

Home document: (iframe: false) this will open the ajax_page in DIV in the same document

$(document).ready(function(){
    $("#modalwindow").colorbox({
        width:"800px",
        height:"510px",
        iframe:false,
        href:"../ajax_page.php",
    });
}); 

and in the ajax_page

$('#modalwindow').colorbox.close();

Hope this helps