Refresh specific block after one-click update

Ask the community
,
41

Hi Matthieu –

I’m trying to update this script to update record success list11, reload list6 (both lists are the new list blocks, and on a page with the new tabs). List 6 is correctly updating when I manually refresh the page after one-click-update action on list 11 is successful.

<script>
window.addEventListener('block-loaded-list11’, () => {
  window.addEventListener('update-record-success-list11’, () => {
    setTimeout(() => {
    window.dispatchEvent(new CustomEvent('reload-list6’));
    }, 2000);
  });
});
</script>
42

I am not sure what you are reporting here, but the reference code you are using,seems to be incomplete:

'reload-list6 ==>‘reload-block-list6’

43

Thank you, I have tried that as well, and it still doesn’t seem to be updating. I had removed the ‘block’ portion as some of the posts on this thread seemed to indicate that was necessary if using the new list blocks.

45

Hi again Kristin,

<script>
window.addEventListener('block-loaded-list11', () => {
  window.addEventListener('update-record-success-list11', () => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('reload-list6'));
    }, 2000);
  });
});
</script>

Can you copy paste the one above, yours has some wrong quote characters.

2 Likes
46

THANK YOU, AGAIN :clap: :tada:

Works perfectly!

1 Like
47

Excellent. Wasn’t aware the the block naming conventions were changing again.
I am glad you have got the help you needed

48

I have a similar issue where I need automatic page reloads upon button clicks, but this code not working as I’m sure I’m missing some important logic. Any help here most appreciated!

Currently when I click the “Favorite” button on a card in the “Grid View”, the card gets added to favorites via Airtable API automation. However, the card doesn’t appear in “My Favorites” tab (list3) until that page is reloaded. Likewise, when I click the “Remove” button on cards in “My Favorites” tab (list3), the card continues to show until the page is reloaded, at which point the card is visually removed.

I tried putting this code in the Page → Settings → Custom Code → Header but I assume I’m missing some logic.

My layout is:
Events: tab-container1

Grid View: list1
My Favorites: list3

image
image1064×659 164 KB

image
image1064×659 46.7 KB

49

Hi,

Can you show me your script?

Your actions are API Calls or update record?

50

Ah, yes it’s an API call rather than 1 click update

image
image410×1114 34 KB

Remove script is:

let config = input.config()
await base.getTable("Event Favorites").deleteRecordAsync(config["record_id"]);
51

Ok
(No need to show me the details of the automation, it’s not strictly related)

Can you try

<script>
window.addEventListener('call-api-success-list1', () => {
  setTimeout(() => {
    window.dispatchEvent(new CustomEvent('reload-list3'));
  }, 2000); //adjust here for more delay
});
</script>

Or

<script>
window.addEventListener('block-loaded-list1', () => {
  window.addEventListener('call-api-success-list1', () => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('reload-list3'));
    }, 2000); // adjust here for more delay
  });
});
</script>

Or

<script>
window.addEventListener('call-api-success-list1', (e) => {
    console.log('call-api-success', e.detail);
    
    setTimeout(() => {
        window.dispatchEvent(new CustomEvent('reload-list3'));
    }, 2000); // adjust here for more delay
});
</script>

It’s a 2 seconds delay… You might need more according to the automation (Script in Automation being slow in Airtable)

Docs for event listenners related to call api => Call API – Softr Help Docs at the bottom of the page

Complete thread about your need => Reload after api call succeed (for further help if needed)

If you prefer reloading the page

<script>
    window.addEventListener('call-api-success-list1', () => {
        setTimeout(() => {
               window.location.reload()
        }, 2000); // adjust here for more delay
	});
</script>
1 Like
52

The above worked, thanks so much. I also added this reload for the “Remove” functionality:

window.addEventListener('call-api-success-list3', () => {
  setTimeout(() => {
    window.dispatchEvent(new CustomEvent('reload-list3'));
  }, 10000); //delay for list3 api call success
});

needed to add a delay of 4-6 seconds on the “Add to Favorites” and 8-10 seconds on the “Remove”. Airtable is slow!

Thanks again