Jump to content

Refreshing Iframe After Receiving Parameters From Another Iframe


Recommended Posts

Hello there,

 

I have two iFrames inside an HTML Page; one is a Submission Form, the other is a Report shown as Tabular. The iFrame with the Tabular Report receives parameters once you press "Submit" on the iFrame containing the Submission Form. It works, but I have to refresh the HTML Page in order for the changes to show in the Tabular Report.

 

What I want is the iFrame containing the Tabular Report (or the entire HTML Page, either way is good) to refresh once i press "Submit" on the iFrame containing the Submission Form, so that the changes will show automatically after i send the parameters.

 

Can it be done? Any help on this matter is appreciated!

Link to comment
Share on other sites

Well, I know the code exists (I looked it up at one point) to refresh just the iframe, but it requires that the iFrame be deployed from your domain and not just the Caspio URL.

 

 

But, here is the code to refresh the page the iframe is hosted on in 3 seconds, I have this deployed as a success message:

 

<body style="background-color: #E1E1E1"  onload="timedText()">

<script>
function timedText() {
    var x = document.getElementById("count");

    setTimeout(function(){ x.value="2" }, 0000);
    setTimeout(function(){ x.value="1" }, 1000);
}
</script>
<div align="center" class="row-fluid iframeplaceholder">
<h1 style="border: 1px solid #000000; width: 70%; padding-top: 1%; padding-right: 1%; padding-bottom: 1%; padding-left: 1%;">Your submission was successful, your page will refresh in... <input id="count" style="width: 15px; background-color:transparent; font-size:21px; font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; border: none; vertical-align:text-middle; height:inherit;" type="text" /> .</h1>
</div>

<script type=text/javascript>

setInterval(function ReloadParent () {
window.parent.location.reload();
},2000);

</script>

This code will also display a little countdown clock to give them a chance to see the success message and make the refresh less abrupt.

 

 

Hope this helps!

 

 

Edit: Oh! I forgot to mention that the styling on that text element can be changed to match your page's feel, it doesn't have anything to do with the codes function.

 

Edit 2: Forgot to mention you should disable the HTML editor in your message display or it will strip the body tag at the top which triggers it to run the function.

Link to comment
Share on other sites

  • 7 years later...

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...