Parameter Passing Between Embedded Tabs

[Gregstand]

I've been successfully passing parameters from a submission form, deployed as embedded in my web page, to a tab structure that contains several datapages for the results.  This tab structure (also deployed embedded) is based on nested iframes and was built using Caspios embedded tab interface  

 

So far so good.

 

Recently I modified the submission form by putting it in a tab structure with other submission form datapages.  But this time I used the Ajax approach suggested by Caspio (http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-tabbed-navigation-for-multiple-datapages/) because I was told that this would be more reliable for passing parameters than using a second iframe embedded structure on the same web page.

 

So in summary I have submission form tabs (Ajax based), passing parameters to nested iframe tabs

Unfortunately the parameters which used to be passed are no longer being passed.

 

Any ideas?

[MayMusic]

Can you bring an example of your page setup? If you are using tabbed interface code from that tutorial and id using embed codes on that there should not be any issues ..

[Kurumi]

Hi - To pass URL query string parameter to an iFrame, you may do the following:

1. Add an id attribute on your iFrame, like add id="myiframe". The deployment code should be like this:
<iframe name="Some iFrame" title="Some iFrame" src="https://c1234567.caspio.com/dp/xxxxxxxxxxxxxxxxxxx" id="myiframe" >Sorry, but your browser does not support frames. Please, contact us.</iframe>

2. Once the id is added, copy and paste the code below in your webpage:

<script language="javascript">
var iframe = document.getElementById('myiframe');
iframe.src = iframe.src + window.location.search;
</script>

You can change the name of the iframe id depending on your preference.

What that code/script does is get the parameter query string of the current page and add the same query string to the iframe src.

Hope it helps!

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