Fancy Box - how to refresh parent page when close iframe popup?

Question

I want my parent page to refresh when I close a Fancy Box popup frame. I have a login page inside the popup, so I need the parent page to refresh to show the new login state

Answer 1

Refresh or reload on closing the form using fancybox in Shopify

I was using this on Shopify but this will work on other also

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);
    },
    afterClose    : function() {
      window.location.reload(true);
        }
  });

here only afterClose is playing the task we can also write parent instead of window

afterClose    : function() {
  parent.location.reload(true);
    }

If just reset the form in shopify then, In shopify sometime $("form")[0].reset() not works so using iteration we can empty the form value

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);
      
      var array_element = document.getElementById("form_id");
      if (array_element){
       
        for (i=0; i < array_element.length; i++){
            element = array_element[i].type.toLowerCase();
            switch(element){
              case "text":
                  array_element[i].value = "";
                  break;
              case "hidden":
                  array_element[i].value = "";
                  break;
              case "email":
                  array_element[i].value = "";
                  break;
              case "checkbox":
                  if(array_element[i].checked){
                    array_element[i].checked = false;
                  }
                  break;
              case "select-one":
                  array_element[i].selectedIndex = -1;
                  break;
              case "select-multi":
                  array_element[i].selectedIndex = -1;
                  break;
              default:
                  break;
          }

        }
      
      }
   
    },
  });

form_id is the form id

Answer 2

$(".fancybox").fancybox({
    type: 'iframe',
    afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose"
        parent.location.reload(true);
    }
});

Alternatively:

Go to your jquery.fancybox.js file and go line 1380 it is look like this and add parent.location.reload(true);

afterClose: function (opts) {
    if (this.overlay) {
        this.overlay.fadeOut(opts.speedOut || 0, function () {
            $(this).remove();
            parent.location.reload(true);
        });
    }
    this.overlay = null;
}

Answer 3

For me next code works ok:

$("a.ic-edit").fancybox({
            'width'     : '65%',
            'height'    : '85%',
            'autoScale'     : false,
            'titleShow' : false,
            'transitionIn'  : 'no',
            'transitionOut' : 'no',
            'scrolling'     : 'no',
            'type'          : 'iframe',
            onCleanup   : function() {
                return window.location.reload();
            }
       });

I can't say exactly, but maybe the reason in using "onCleanup" (actually I didn't try use onClosed).

Answer 4

A work around to avoid having POSTDATA Warning when you close the iFrame

1) Please Create form :

<form name="RefreshForm" method="post" action="" >
<input name="Name1" value="Value1" type="hidden" />
<input name="DatafromPost1" value="ValuefromPOST1" type="hidden" />
<input name="DatafromPost2" value="ValuefromPOST2" type="hidden" />
</form>

2) add this lines at the end of your Fancy-Box:

Fancy ver 2.x.x

afterClose : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

Fancy ver 1.3.x

     onClosed : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

1000 = 1 second.

Answer 5

'onClosed': function() {
 parent.location.reload(true); 
;} // <----is it ok if you have an extra ';' here?

Answer 6

You just need to write two lines to close the fancybox and after close to reload the parent page on which you have opened your fancybox.

One thing to be notices is that if you will try it with window.opener it not going to work as fancybox is not treated as a child window of the parent when it comes to window.opener

One more thing is that window.opener is not going to work for windows phone and also with IE, as IE is already stupid.

<script type="text/javascript">
parent.$.fancybox.close();
         parent.location.reload(true); 
</script>