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

user_393782 0
Viewed 65688

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 when the Fancy Box closes.

I can get it to work without the iFrame code:

<script type="text/javascript">
 $(document).ready(function() {
  $("a.iframeFancybox1").fancybox({
   'width': 800,
   'height': 450,   
   'onClosed': function() {   
     parent.location.reload(true); 
    ;}
   });
 });
</script>

But I can't get it to work with the iFrame code:

<script type="text/javascript">
 $(document).ready(function() {
  $('a.iframeFancybox1').fancybox({
   'width': 800,
   'height': 450,
   'type' : 'iframe'
   'onClosed': function() {
     parent.location.reload(true); 
    ;}
   });
 });
</script>

The problem is to do with this line:


'type' : 'iframe'


As soon as I add that line, the popup stops working.


Can anyone suggest a solution as to how I can get an iframe to popup in Fancy Box, and still get the parent page to refresh when the box closes?
 Thanks!

fancybox jquery
12 Answers

Well I know this is an extremely old post but here's a newer answer that I hope helps someone out there. I am using fancybox on a page with my website inquiries to pop up in a lightbox to read / delete. When I delete an inquiry in the light box I wanted the parent to refresh to show a current list of inquiries minus the one I just deleted. The upvoted comment didn't help me (as it is probably referencing an older version of the JS file).

On line 105 of jquery.fancybox.js (v3.5.7) change:

afterClose: n.noop,

to

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

It's been irritating me for a few days but it now works no worries.

user_139382620

When using the examples with 'location.reload' you get a browser pop that lets you know it needs to reload the page. I fired a button click to refresh the page and no warning popup.

$(".addDoc").colorbox({
    iframe: true, 
    width: "550px", 
    height: "230px",
    'onClosed': function() {
        $("#btnContSave").click();
    }
});
user_13971270

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

user_82311580
Related