Refreshing IFrames

[flashcz]

I have an custom HTML page with 4 embedded Iframes to create a tabbed page on my website. Is there a way that the data, that is updated on page 1 will then reflect on the data that page 2 or 3 ect will show without the user having to refresh the page or log out and back in again,

for example a user logs in to see what jobs he has quoted for on page 1, user updates a drop down to say successful, when the update is pressed it dissapears from the quoted page, which is fine, but does not appear on the successful page until the user logs back in or refreshes

Thanks

Derek

[MayMusic]

You can put this code in an HTML Block in the DataPage to refresh the parent:

document.getElementById("caspioform").onsubmit=parent.location.reload;

[Heineperson]

Hi, I'm running across the same issue as the @flashcz. However, the below code is not doing the trick. It's been a few years since this question was answered, so I am curious if there is a different solution now? 

On 12/4/2012 at 5:27 PM, MayMusic said:

You can put this code in an HTML Block in the DataPage to refresh the parent:

 

document.getElementById("caspioform").onsubmit=parent.location.reload;

 

 

[KlisaN137]

Hi, the code document.getElementById("caspioform").onsubmit=parent.location.reload; is now replaced with:

document.addEventListener('FormSubmitted', function (event) {
          parent.location.reload;
});

[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();