MostlyJava Posted July 30, 2015 Report Share Posted July 30, 2015 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! Quote Link to comment Share on other sites More sharing options...
DataCobalt Posted July 30, 2015 Report Share Posted July 30, 2015 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. Quote Link to comment Share on other sites More sharing options...
MostlyJava Posted August 3, 2015 Author Report Share Posted August 3, 2015 This was helpful! If you say the other one is also possible, I'll keep looking for it, but this will work in the meantime. Thank you!! Quote Link to comment Share on other sites More sharing options...
DataCobalt Posted August 3, 2015 Report Share Posted August 3, 2015 http://stackoverflow.com/questions/19593004/reloading-iframe-from-separate-iframe This should be a good place to start but please remember that this absolutely requires the iframe be on your page hosting domain and not the Caspio deploying URL. Quote Link to comment Share on other sites More sharing options...
Kurumi Posted May 30, 2023 Report Share Posted May 30, 2023 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(); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.