Airtable iframes won’t update in real time?

[Jeremy_Chevalli]

This doc states that when “you change cell values, … [etc.], the link will automatically update in real time to show the most up-to-date version of the view.”

However, I’ve got a setup in which Typeform submissions trigger Zapier to find & update Airtable records, and I can’t get the Airtable iFrame (embedded on my site) to update in real time.

Am I missing something?

[Jeremy_Oglesby]

There is a subtle difference between saying “the link” will update in real time (which is what happens) and saying ”the iframe” updates in real time (which is what you were hoping would happen.

When they say the link will update in real time, they aren’t lying - if you were to make a change to your Airtable view that is in the iframe and then immediately refresh the page that contains the iframe, the iframe will immediately pull in your changes, because the ”the link” has access to the new data immediately - ie, the link is updated immediately in a sense. The iframe will pull down your updated view when it is refreshed.

However, the iframes Airtable provides have no ability to update themselves apart from a page reload. They contain no scripting (JavaScript) that would enable that kind of autonomous and asynchronous communication.

They aren’t necessarily lying when they say that the links are updated immediately - you don’t have to go get a new link anytime you update the page. It just doesn’t quite do what many are inclined to think it does when they read that statement.

[Jeremy_Chevalli]

Hey Jeremy, thanks for your response. It sounds like the solution is implementing some kind of script on my end, right? Do you happen to have any advice on reloading iFrames? I have tried applying meta http-equiv="refresh" content="30" but it does not seem to work for iFrames. I will do some more digging around the interwebs, but would much appreciate any experiences you might be able to share.

[Jeremy_Oglesby]

I don’t have a ton of experience, so I can really only try to point you in the right direction. JavaScript can be a bear to wrestle with sometimes.

Do you know if your site uses jQuery? If not, I’d suggest checking it out, as it can make a lot of JavaScript functionality easier and more understandable to write:
https://api.jquery.com

Also, where to place this JavaScript is going to depend on the framework used to build your site - is it an application or is it just a static site? Are you primarily responsible for maintaining it?

Just to try these things out, you should be safe to write your script inside a

<script js>
</script>

tag at the bottom of your HTML file. In most web application frameworks, this is not the ideal place to put your JavaScript, but it will work to load it into your user’s browser.

You can use this simple jQuery statement to tell the browser to begin running your JavaScripts when the page finishes loading:

<script js>

$(function() {

   << your scripts here >>

});

</script>

Then you can write JavaScript functions (using jQuery API when it suits) to do what you need done dynamically on the page.

You may be able to do something with the setInterval() function and a function that refreshes your <iframe> and hits the Airtable API for data to use for resizing the <iframe>:
https://www.w3schools.com/js/js_timing.asp

Or you may want to try to make it easier on yourself and use a button to trigger a refresh of the <iframe> and retrieval of new data from Airtable to use for resizing the <iframe> with event handlers:
https://www.w3schools.com/js/js_events.asp

Either way, you need to accomplish 2 things with your scripts -

1. Refresh the content of the <iframe> - the link that feeds it needs to be “hit” again to fetch the current state of the Airtable View it is displaying
2. Hit the Airtable API to fetch the number of records in that view to use for resizing the <iframe>; you’ll need to fetch the data, then have some function to convert the number of records to a display size for your frame, then apply that sizing by targeting your <iframe> and modifying its height="" property

That may be about as far as I can advise - I’m pretty new to web development. If you are new to JavaScript, you may be in for a bit of a ride here :slightly_smiling_face: Have fun!

[Jeremy_Chevalli]

Hey again! Thanks for the detailed response on this. I am going to give the timing functionality a shot sometime soon, and report back here. Much appreciate your response.

[Noah_Steinberg]

Hey Jeremy,

Did you get anywhere with this?

Working on something similar now.