I'm getting the data from Google sheets and displaying it on Google WebApp front end. But The problem is, the Google WebApp front end don't update itself unless the window is refreshed.
Is there a way to refresh itself when it detects a data change in Google sheets or refreshes itself every 15 minutes.
index.html
<script>
function onSuccess(UpdatedData) {
var div = document.getElementById('output');
div.innerHTML = '<div class="badge bg-primary text-wrap fw-normal" style="width: 6rem; ">Last Updated:</div> <span class="font-weight-normal text-muted fs-6">'+ UpdatedData + '</span>';
}
google.script.run.withSuccessHandler(onSuccess).getdata();
</script>
<body>
<div id="output"></div>
</body>
If you want a function to execute every X seconds, you can use the setInterval method.
For example, in your script:
<script>
function onSuccess(UpdatedData) {
var div = document.getElementById('output');
div.innerHTML = '<div class="badge bg-primary text-wrap fw-normal" style="width: 6rem; ">Last Updated:</div> <span class="font-weight-normal text-muted fs-6">'+ UpdatedData + '</span>';
}
setInterval(()=>{
google.script.run.withSuccessHandler(onSuccess).getdata()
},1e4)
</script>
<body>
<div id="output"></div>
</body>
This will make the function inside the setInerval run every 10 second (10 seconds == 1e4, the time should be in milliseconds). So for refreshing it every 15 minuts you should use 9e5