I have a table with one click action buttons. The table refreshes fine after the action button is clicked.
But, need to refresh the block below it (also a table) so that the calculated total updates.
Hi Kristin,
You can perform such thing with custom code:
<script>
window.addEventListener('block-loaded-BlockID1', () => {
window.addEventListener('update-record-success-BlockID1', () => {
setTimeout(() => {
window.dispatchEvent(new CustomEvent('reload-block-BLOCKID2'));
}, 1000); // 1000 milliseconds = 1 second
});
});
</script>
Change BlockID1 by the block id where the update occurs.
Change BLOCKID2 by the block you want to be reloaded after an update.
I added a 1 second delay before reloading to give Airtable time to do the calculations. Though you can adapt it to something that would make more sense to you (change 1000 by whatever you want)
Script to be placed in the header custom code of the page
2 Likes
Thank you, Matthieu! Appreciate it 
Hey @matthieu_chateau !
Iâve come across lots of different examples, all from you :
window.addEventListener('delete-record-success-blockID1', () => {
window.dispatchEvent(new CustomEvent('reload-block-blockID2'));
});
window.addEventListener('submit-form-success-blockID1', () => {
window.dispatchEvent(new CustomEvent('reload-block-blockID2'));
});
window.addEventListener('update-record-success-blockID1', () => {
window.dispatchEvent(new CustomEvent('reload-block-blockID2'));
});
Is there a logic here? Like âŚ
window.addEventListener('STATUS-record-success-BLOCKWITHBUTTON', () => {
window.dispatchEvent(new CustomEvent('reload-block-BLOCKTORELOAD'));
});
(and whatâs the big deal if the buttons are in a modal window and the blocks to be updated are on the modal + on the window that opened the modal?)
Do you have any reading material to recommend so that I can understand all this a little better?
Thanks a lot
And why the header and not the footer ? 
Hi Yannick,
The event listener is created by Softr. So there is no pattern. There is update/delete/submit-form. Nothing else. You canât add any status you want. Though these event listeners were created with the logic you point.
No reading material for it = my experience only + talks with engineering team + my books on Javascript. Even if I had (I have) I wouldnât give it: building apps in Softr, among other no/low code tools, is my full time job and I choose to keep some of my findings for myself. I give enough to the community (a lot) so that it doesnât create any problem for people wanting to do things by themselves or for people wanting a bit of help.
Header is important as sometimes (often) a block loads faster than the footer code is being executed, so the block fires an event but there is no listener yet.
By putting those into header you will make sure you always have the listener in advance to act to the loading event
(and whatâs the big deal if the buttons are in a modal window and the blocks to be updated are on the modal + on the window that opened the modal?) I didnât understand this oneđ
Hey, thanks for taking the time to reply and yes, youâre participating like crazy, itâs very cool, thank you!!!
(and whatâs the big deal if the buttons are in a modal window and the blocks to be updated are on the modal + on the window that opened the modal?)
Sorry ⌠What I was trying to say is that I have cases with :
In a page, I have :
- a table block containing a list
- a second table block containing another list
- each block opens the same modal on click
On this modal I have :
a. a List Detail block
b. a List Detail block with a series of buttons
c. another List Detail block with a series of buttons
And what Iâm trying to do is :
W. If I update a record by clicking on b. or c.
X. it updates 1)
Y. it updates 2)
Z. it updates a)
Good luck figuring it out
It should be this, if I followed you correctly:
<script>
window.addEventListener('block-loaded-Blockb', () => {
window.addEventListener('update-record-success-Blockb', () => {
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
});
});
</script>
<script>
window.addEventListener('block-loaded-Blockc', () => {
window.addEventListener('update-record-success-Blockc', () => {
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
});
});
</script>
Merged =>
<script>
window.addEventListener('block-loaded-Blockb', () => {
window.addEventListener('update-record-success-Blockb', () => {
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
});
});
window.addEventListener('block-loaded-Blockc', () => {
window.addEventListener('update-record-success-Blockc', () => {
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
});
});
</script>
Hi Matthieu!
What would Softr do without you? Thanks a lot.
Iâm beginning to understand how it works.
Nevertheless, the script works perfectly for the child page, but the modal block doesnât refresh, I donât know why, no matter which button is used.
This one : window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
Try this one, it works on my side
<script>
window.addEventListener('block-loaded-Blockb', () => {
window.addEventListener('update-record-success-Blockb', () => {
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
});
});
window.addEventListener('block-loaded-Blockc', () => {
window.addEventListener('update-record-success-Blockc', () => {
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
});
});
</script>
Or using block-loaded-BlockID event listener to debug everything without changing anything in the script:
<script>
window.addEventListener('block-loaded-list-Blocka', () => {
window.addEventListener('block-loaded-Blockb', () => {
window.addEventListener('update-record-success-Blockb', () => {
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
});
});
window.addEventListener('block-loaded-Blockc', () => {
window.addEventListener('update-record-success-Blockc', () => {
window.parent.dispatchEvent(new CustomEvent('reload-block-Block1'));
window.parent.dispatchEvent(new CustomEvent('reload-block-Block2'));
window.dispatchEvent(new CustomEvent('reload-block-Blocka'));
});
});
});
</script>
Ok, actually I still have the same weird problem: it refreshes the block of the button I clicked on.
If I click on the Blockb button, it refreshes Block1 + Block2 + Blockb - not Blocka.
If I click on the Blockc button, it refreshes Block1 + Block2 + Blockc - not Blocka.
I renamed my blocks (which arenât really called a/b/1âŚ) to see if they could conflict with other scripts, but no. If you have no idea, forget it, youâve already taken up a lot of time
Mmmm It should work, itâs something I do very oftenly. The block should reload, visually (but maybe the data doesnât come back as quicly as the reload => a set timeout might be needed).
The fact that it refreshes the block of the button you clicked on is normal and is not related to the script = each time you use an action button it reloads the blocks afterwards, automatically, itâs a Softr native feature.
Hope you will find the missing details!
Ok, Iâll try to start from scratch without any script.
Thanks 1000 times for your time!
Sorry to wade in, but thought Iâd ask a related question here, as it seems relevant.
@matthieu_chateau if we want to ONLY refresh the block after a SPECIFIC button click, how would we do that?
For example, Edit record button in Softr works instantly. However, one-click update triggering an AirTable script needs a block refresh with a pause. I only want the refresh on the one-click update, not the first update.
Is there custom code to only trigger the âreload-blockâ on a specific button press, or a one-click update?
Many thanks!
The refresh doesnât seem to work on the beta âgridâ list blocks. Is this to be expected?
The new blocks have a different event listener.
Before it was window.dispatchEvent(new CustomEvent('reload-block-blockID'));
Now it is window.dispatchEvent(new CustomEvent('reload-blockID'));
âblockâ disappears.
2 Likes
Hi,
This would be possible by pointing to the correct button using .MuiButtonBase-root:nth-child(n), in addition to the correct event listener for an update. Which is tricky to perform in Softr, the action buttons being encapsuled in different elements, hard to find, depending on where they are.
Do you have a picture of where is your button in the block?
