Jump to content

Recommended Posts

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...

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...