Refresh Iframe inside a report data page

[adrianakobu]

So I have a iframe inside my report data page and on the same page I have an URL that opens a pop up window, this pop up window receives parameters from my report data page and once I fill out and close the pop up window I want my iframe to reload, because the pop up window is actually the submission form for the iframe. I just want to reload the iframe because if I reload the whole page, my changes on other fields will be lost. Can somebody guide me on how to do this?

[astroboy]

Hello there, if it helps, there's a new HowTo documentation about auto refreshing a page and you may check it using this link: https://howto.caspio.com/faq/reports-datapages/how-to-auto-refresh-a-page/

[LWSChad]

 

I don't think you can communicate from a popup window to another browser tab/window, but you can refresh a specific iframe instead of the whole page.

 

<iframe id="my-iframe" src="my-page.html"></iframe>

<button onclick="refreshIframe();">Reload Iframe</button>

<script>
  function refreshIframe() {
    const ifrEle = document.querySelector('#my-iframe');
    ifrEle.src = ifrEle.src;
  }
</script>

 

[Kurumi]

Hi - Just wanted to share this specific code to refresh/reload the iFrame in your DataPage.

document.getElementById('some_frame_id').contentWindow.location.reload();

Reference: https://stackoverflow.com/questions/86428/what-s-the-best-way-to-reload-refresh-an-iframe

This can be applicable to this article: https://howto.caspio.com/tech-tips-and-articles/create-embeddable-tabbed-interface/

This article provides a script for Tabbed interfaces. As the script is using iFrames, every change of tab - the DataPage will remain as it is. If you are using a Report DataPage, it will not load the new data. As a workaround, you can edit the code that will reload the iFrame with every click of the tab.

Updated script:

<script>
 function getElementByClass(classer) {
 var allHTMLTags=document.getElementsByTagName("*");
 var array = [];
 for (i=0; i<allHTMLTags.length; i++) {
 if (allHTMLTags[i].className==classer) {
 array.push(allHTMLTags[i]);
 }}
 return array;}
 
 function channel(n){
 var frames = getElementByClass("ChannelView");
 var length = frames.length;
 for(var i = 0; i < length; i++)
 { if(frames[i].id == ("viewer"+ n))
 { frames[i].style.display = "inline";
   frames[i].contentWindow.location.reload();

 }else{ frames[i].style.display = "none";}}}
 </script>
 
 <div style="display:block; text-align:left;">
 <div style="display:block;">
 <ul id="menu">
 
 <li><a onclick="channel(0)">Tab 0</a></li>
 <li><a onclick="channel(1)">Tab 1</a></li>
 <li><a onclick="channel(2)">Tab 2</a></li>
 
 </ul>
 </div>
 
 <div class="content">
 
 <iframe frameborder=0 id="viewer0" class="ChannelView" src="URL of Tab 0" style="display:inline"></iframe>
 <iframe frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
 <iframe frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>
 
 </div>
 </div>

The change is by adding this code:

frames[i].contentWindow.location.reload();