Reload Main Page

[Master]

I have an iframe and from within that frame I want to reload the main page. How can I do that?

[MayMusic]

use the code below in an HTML Block

<script>
document.getElementById("caspioform").onsubmit=parent.location.reload;
</script>

[Farnsbarnes]

Hi

I'm at a loss as to why I can't get this to work.

I've got MayMusic's code, in an HTML block, in a datapage. This datapage (search submission form) is deployed as an iframe on my webpage.

On the same webpage I've got a separate results page, also deployed in an iframe, although I don't honestly see why this should interfere with anything.

All I want to do is refresh the whole webpage when submit button is pressed on the search submission form.  But only the submission form iframe is refreshing 

Any ideas what I'm doing wrong?   (I've already tried putting the code in the footer)

Thanks...

 

[MayMusic]

In the same frame you have only one Caspio page correct? try to add this code:

 

Header:

<div id="mypage">

Footer:

</div>
document.getElementById("mypage").onsubmit=parent.location.reload;

[Farnsbarnes]

Thanks MayMusic.  I tried what you said, but still only the iframe reloads.  I've tried so many alternative approaches from advice on the web that I'm driving myself nuts.  How hard can this be?!

I'd add that my website is in weebly... does this stop such things from working?   Else, should I be adding code to the webpage HTML itself, above or below where I deploy the caspio code?

Please save my sanity!

[MayMusic]

Did you add the code to your Caspio submission page header and footer? Did you disable Rich Text Editor before adding the code?

[kRv]

Hello Farnsbarnes,

Can you tell me please, do you use different domains for parent page, and for iframe? If yes, proposed solution cannot works due to security restrictions. Can you please open browser console, and look for some run-time errors, when you submit form in iframe? Can you see some error with similar text? "SecurityError: Blocked a frame with origin..." 

If you have similar error, you can use some different technique based on messages. Please pay your attention that it will works in modern browsers only. You can see list of supported browsers here http://caniuse.com/#search=postMessage  

 

Add code below to header on your parent page:

window.onmessage = function (e) {
	if (e.data === "refresh") {
		location.reload();
	}
};

Add code below to footer in your DataPage, which will open via iframe.

<script type="text/javascript">  
document.getElementById("caspioform").onsubmit = function () {
	if (window.parent && window.parent.postMessage) {
      window.parent.postMessage("refresh", "http://bridge.caspio.net"); //put your own domain here
    }
}
</script>

Thanks

[Farnsbarnes]

Hello kRv... your solution works perfectly.  Thank you!!!

I hadn't realised the parent page and iframe had to be on the same domain and I was indeed getting errors in the console, just as you said.  I guess this is always going to be an issue when deploying iframes on webpages as I can't see a situation where caspio datapages deployed as iframes  can ever be on the same domain as the webpage.

Is it much of a step up to alter the code slightly so that, from inside my iframe, I can refresh another iframe on the same page, instead of updating the whole web page?

Thanks

 

[kRv]

Hello Farnsbarnes,

Yes, you can. For reload particular iframe, you need to correct your code. On your parent page, in "onmessage" event handler replace line below

location.reload();

to several new lines

var f = document.getElementById("Frame2"); //Set real id

f.src = f.src;

Thanks

[Farnsbarnes]

You are a true expert kRv.  This works great, although it has introduced a strange problem.  When I press 'submit' in the first iframe, the second iframe does update - but it updates with the previous selection I made!    In other words, the updated iframe is always one step behind the most recent submission.  I was wondering if this might have something to do with cache in the browser (?).  If so, would it help to have a line of code to clear the cache in the second iframe before each submission?  Or maybe I'm completely wrong!

Thanks

 

[kRv]

Hello Farnsbarnes,

May you please place code below to you parent page, to "onmessage" event handler? Just replace "f.src = f.src;" to code below. I hope it will help. In case if it does not fix the issue with old data, can you please post link to you parent page? If it isn't acceptable, just send link to parent page to me via forum message.

try { f.src = f.src.replace(/[&][t][=][0-9]+$/gi, '') + '&t=' + String(new Date().getTime()); } catch (e) { }

Thanks

[Farnsbarnes]

Hello kRv

I'm afraid this still doesn't help.  Please find attached my search and results datapages and tables.  They've been simplified to the bare essentials so there is no confidentiality issue..

Thanks

Farnsbarnes XLM datapages and table 2016-Jul-02.zip

[astroboy]

Hello there, if it helps, you may check this HowTo documentation about auto refreshing a page: https://howto.caspio.com/faq/reports-datapages/how-to-auto-refresh-a-page/

[Kurumi]

Hi - Just wanted to share this solution. You can use this if you have a Tabular Report with Inline Edit and upon update, you want to reload the whole page. Insert it in the Footer of the DataPage.

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

  document.addEventListener("change", function(event){

    var edit= document.querySelector('[name="Mod0InlineEdit"]');
    
       edit.addEventListener("click", function(){
          window.parent.location = document.referrer;
       });
  });
  
});
</script>

 

[FinTheHuman]

Hey there! Caspio released a new feature that allows you to customize your domain for your Caspio-powered applications.

Source: 
https://howto.caspio.com/release-notes/caspio-44-0/#:~:text=Release Notes-,Custom Domains,-We are excited
https://howto.caspio.com/managing-your-account/account-settings/custom-domain/