Caspio Iframe Embedded Tabbed Interface

[Breee]

Hi, 

 

I used the IFrame Embedded Tabbed Deployment instructions located on the Caspio Advanced customizations page. The iframe is working as designed but I'm having an issue with a report datapage included in the frame not refreshing. 

I have 4 Caspio datapages included in the frame. 

The  first page 1-0 is a submission form that directs the user after submit to the second page 1-1 a tabular report.

The second page 1-1 tabular report  includes an Href link to a 3rd page 1-2 another submission form.  

The 3rd page 1-2 submission form directs the user back to 1-1 the tabular report w/href link in case the user needs to make additional requests. 

The 4th page 1-3 is a tubular report that displays all information submitted using the href link on the 3rd page 1-1 tabular report via the submission form on 1-2.

 

My issue is the following:

When I direct the 3rd page 1-2 after submit back to 1-1 with HREF link so that additional user requests can be made the Iframe does not update the report page 1-3. I have to manually refresh 1-3 to see the submission made on page 1-2.

If I change the redirect of the 3rd page 1-2 after submit to the tabular report page 1-3 directly the report refreshes correctly in real-time without having to manually refresh. 

 

I'm trying to determine if a page has to actively be 'touched' in the iframe for updated table information to display without a manual refresh of the page. From a user perspective I'd like to make all my requests first (page 1-1/submission from 1-2) and then view the report (1-3) to confirm and check status. I don't think the user experience should be to view the report after every selection if other requests need to be made. 

As always I appreciate any feedback that can be provided. 

 

Thank you. 

Bre

 

 

 

 

[Breee]

Hi

After researching I'd like to simplify the question. 

I'm using the following code (styling removed): 

<script>
function getElementByClass(classer) {
var allHTMLTags=document.getElementsByTagName("*");
var array = [];
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags.className==classer) {
array.push(allHTMLTags);
}}
return array;}

function channel(n){
var frames = getElementByClass("ChannelView");
var length = frames.length;
for(var i = 0; i < length; i++)
{ if(frames.id == ("viewer"+ n))
{ frames.style.display = "inline";
}else{ frames.style.display = "none";}}}
</script>

<div style="display:block; text-align:left;">
<div style="display:block;">
<ul id="menu">

<li><a onclick="channel(0)">How To</a></li>
<li><a onclick="channel(1)">e-Order New </a></li>
<li><a onclick="channel(2)">e-Order Add Vendor</a></li>
<li><a onclick="channel(3)">Status</a></li>

</ul>
</div>

<div class="content">

<iframe frameborder=0 id="viewer0" class="ChannelView"  src="http://www.test.com/Test1-0.html" style="display:inline"></iframe>
<iframe  frameborder=0 id="viewer1" class="ChannelView" src="http://www.test.com/Test1-1.html"></iframe>
<iframe  frameborder=0 id="viewer2" class="ChannelView" src="http://www.test.com/Test1-1.html"></iframe>
<iframe  frameborder=0 id="viewer3" class="ChannelView" src="http://www.test.com/Test1-3.html"></iframe>

</div>
</div>

 

I need for frame Test 1-3 the status tab link to reload the status page onclick. The page is currently stale and does not show updates onclick unless a manual refresh is performed. The reload code that I've used will refresh the Status link to the parent page inside of the frame. I need the status link to refresh and show itself not the parent page. 

 

Here's the code that I've tried so far that refresh to the parent page: 

<input type="button" value="Refresh Page" onClick="window.location.reload()">

and 

<input type="button" value="Refresh Page" onClick="history.go(0)">

and 

<input type="button" value="Refresh Page" onClick="window.location.href=window.location.href">

 

Based on my research it appears that I need code that will refresh as soon as the tab is opened after switching the UI ID first. I located a snipped on jquery.com but am not sure how to use it with the existing Caspio code. Specifically the Caspio code uses "menu" instead of tabs and "Viewer" instead of panel ID. 

$('.tabs').each( function() {

      show: function(event, ui) {

            switch (ui.panel.id) {

                  case 'tab1':

                        $('#myiframe').get(0).contentWindow.location.reload();

                        break;

                  default:

            }

      });

});

Again any help or guidance is greatly appreciated. 

[Breee]

Hi, 

I struggled with this for a few days so I thought it best to share what ultimately worked for me. In case anyone has a like issue with having a tab within the IFrame refresh without landing back on the parent page I was able to figure out how to refresh the child IFrame tab separate from the parent location without creating a button for refresh. 

 

The Caspio Embedded tab interface code does not designate a DIV ID; a DIV ID is required for the script to work. Also, the IFrame must include a name that you will have to add in as well. I've highlighted in red the items that need to be added to the existing code. Bolded red items are the glue that make the script work so be sure to check them. The blue highlights are tab names and the Iframe URL's that should be updated according to your needs. 

In the example below I'm only refreshing 1 of my tabs. However, if you need to refresh mutliple tabs on click you can add to the script below. No changes were made to the styling that is provided by Caspio so I'm eliminating that from the example below. 

 

<div style="display:block; text-align:left;">
<div style="display:block;">
<div id="iframeRefresher">
<ul id="menu">

<li><a onclick="channel(0)">How To</a></li>
<li><a onclick="channel(1)">e-Order New Entry</a></li>
<li><a onclick="channel(2)">e-Order Add Vendor</a></li>
<li><a onclick="channel(3)">Status</a></li>

</ul>
</div>

<div class="content">

<iframe frameborder=0 id="viewer0" class="ChannelView"  src="http://www.test.com/test1-0.html" style="display:inline"></iframe>
<iframe  frameborder=0 id="viewer1" class="ChannelView" src="http://www.test.com/test1-1.html"></iframe>
<iframe  frameborder=0 id="viewer2" class="ChannelView" src="http://www.test.com/test1-2.html"></iframe>
<iframe  name="test" frameborder=0 id="viewer3" class="ChannelView" src="http://www.test.com/test1-3"></iframe>

</div>
</div>

<script>
window.onload = function() {
 document.getElementById('iframeRefresher').addEventListener('click', function() {
        var ifr = document.getElementsByName('test')[0];
        ifr.src = ifr.src;
    });
}
</script>

 

Thanks to anyone who may have been reviewing my question but not yet responded with an answer. I know that all were quite lengthy. 

 

Best, 

Bre

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