Refreshing a page once after some time

Ask the community
,
1

Hi

I have a list (called supplier-list) that is based on Airtable data and I have “One-click Update” button on the page that sets a toggle in the database. I have a trigger and backend logic setup in Airtable automation based on that toggle. I want the softr block to refresh after some time (say) 10 seconds (giving the Airtable automation some time to finish running). I used the script below, but it doesn’t seem to be working. Any ideas?

2

Hi,

We can’t see the script, please use the button </> to show it (the code needs to be inside), then I will be able to help.

3 
<script>
var form1 = document.getElementById('supplier-list');
form1.addEventListener('submit', function() {
  setTimeout(function() {
    window.location.reload();
  }, 10000);
});
</script>
4

Please, try this one, in the footer custom code of the page settings

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('update-record-success-supplier-list', () => {
    setTimeout(() => {
      window.location.reload();
    }, 10000);
  });
});
</script>
5

That worked. Thank you!

6

You’re welcome,

For a better user experience, as 10 seconds can be long for a user, you could display an alert box (or an alert popup) saying “Please wait until the page reloads”. The alert box is fully customizable.

Here is a code you can insert in the header custom code:

<div id="alertbox1" class="alertbox">
  <div class="alertbox-header">Success</div>
  <div class="alertbox-message">Please wait until the page reloads.</div>
  <button class="alertbox-close" onclick="document.getElementById('alertbox1').style.display='none';">&times;</button>
</div>

<div id="alertbox2" class="alertbox">
  <div class="alertbox-header">Error</div>
  <div class="alertbox-message">Sorry, there was an error while updating your record.</div>
  <button class="alertbox-close" onclick="document.getElementById('alertbox2').style.display='none';">&times;</button>
</div>

<style>
.alertbox {
  display: none;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  text-align: center;
}

.alertbox-header {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: green;
}

.alertbox-message {
  font-size: 16px;
  margin-bottom: 20px;
  color: #182939;
}

.alertbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.alertbox.error {
  background-color: #FFFFFF;
}

.alertbox.error .alertbox-header {
  color: red;
}
</style>

<script>
const alertbox1 = document.getElementById("alertbox1");
const alertbox2 = document.getElementById("alertbox2");

window.addEventListener('update-record-success-supplier-list', function () {
  alertbox1.style.display = "block";
});

window.addEventListener('update-record-fail-supplier-list', function () {
  alertbox2.style.display = "block";
  alertbox2.classList.add("error");
  alertbox2.querySelector('.alertbox-header').classList.add("error");
});

window.addEventListener('update-record-success-supplier-list', () => {
  setTimeout(() => {
    window.location.reload();
  }, 10000);
});
</script>
7

This is wonderful. Super helpful! Thanks a bunch.

8

One improvement question…
Is there a way to only reload the supplier-list section instead of reloading the whole page?

1 Like
9

Nope, this is impossible for now (except for the calendar block)

1 Like
10

Ok. Thanks for the quick response. Appreciate it.

11

This is now possible => Refresh / Reload data in a List Block - #5 by artur