Rebind Gridview on Fancybox close

[mrwrighty]

I have a grid view with a column that when clicked opens another page as an iFrame in a Fancybox. The link is

<a class="transfer" compensate-for-scrollbar="" data-fancybox="" data-src='transfer.aspx?fromasm=<%# Me.UsernameDropDownList.SelectedValue %>&fromasmemail=<%# Me.EmailHiddenField.Value %>&pos=<%# Eval("partnumber") %>&description=<%# Eval("description") %>' data-type="iframe" href="javascript:;"> <img id="Open" alt="Click to Open Order" width="16px" border="0" src="images/transfer48x48.png"/> </a>

When the Fancybox is closed after completing the task, I would like the Gridview to rebind with the new values that were changed through the Fancybox page.

I have tried this on the originating page

<script type="text/javascript"> $('a.transfer').fancybox({ type: 'iframe', afterClose : function() { window.opener.location.reload() } }); </script>

also tried parent.location.reload(true); on the originating page but cannot even get the page to refresh let alone the gridview to rebind.

Any help would be much appreciated as I'm going in circles trying to resolve this.

[fancyapps]

Hi,

First, you need to specify which version of Fancybox you are using, because $('a.transfer').fancybox(... looks like v3, but this package contains Fancybox v4+ that does not use jQuery.

For v4, simply use closing callback, here are examples on how to use events - https://fancyapps.com/docs/ui/fancybox/events#1-example

[mrwrighty]

Ah OK I changed the script links to V4 but couldn't find a specific answers to my question so was working with what I had. I presume I could go back to V3 if this works, but as its now unsupported would make sense to get it working with V4.

[fancyapps]

So, did you try something like this?

Fancybox.bind("[data-fancybox]", {
  on: {
    closing: () => {
      	// Refresh my data
      	// ...
    },
  },
});

[mrwrighty]

Ah OK thats now triggering a response. What I forgot to mention is that the link above is in an iframe thats loaded in to a user interface so the fancy box iframe is in effect called from a iframe. Can I refresh just the originating iframe on close. As V4 is very new I'm struggling to find any examples for what I want to achieve.

[fancyapps]

I'm sorry, but I don't understand what exactly makes you to struggle.

How to determine when Fancybox is closing -

Fancybox.bind("[data-fancybox]", {
  on: {
    closing: () => {
      	// your code
    },
  },
});

How to refresh parent page -

window.parent.location.reload();

Combine that:

Fancybox.bind("[data-fancybox]", {
  on: {
    closing: () => {
      	window.parent.location.reload();
    },
  },
});

So, please, ask a more specific question or show your page/demo.

[mrwrighty]

Sorry thanks for the heads up, I have fixed the issue now, the Fancybox.bind allowed me to refresh the iframe in question using

window.parent.document.getElementById("iframepage").contentWindow.location.reload();

[fancyapps]

I'm glad you got it working :)