Refresh specific block after one-click update

Ask the community
,
21

Hi @matthieu_chateau thank you for the help and quick response! Here is what I tried:

<script>
window.addEventListener('block-loaded-1a', () => {
  window.addEventListener('update-record-success-1a', () => {
    window.parent.dispatchEvent(new CustomEvent('reload-1'));
    window.parent.dispatchEvent(new CustomEvent('reload-2'));
    window.dispatchEvent(new CustomEvent('reload-1a'));
  });
});
</script>

I removed the “block” in “reload-block-1a” because all three blocks are the dynamic beta blocks, but I tried it as written above and that didn’t work either. Do you have any ideas of what else I can look for/troubleshoot?

22

Did you add the code in the parent page or in the modal page (child page)?
In the header custom code or in the footer custom code?

23

I tried both the parent page and child page (separately), no luck. I put both in the header custom code.

24

What is your data source?
Would you mind recording a video to show me the parent page, the modal page and what’s inside your custom code header?

25

Yes, I just messaged you a recording. Our data source is Airtable—let me know if I can provide any other details. THANK YOU again!

26

Hi everyone.

I am sure the answer to my question is buried somewhere in this long thread. I am just not sure which code snippet to use :slight_smile:

I have two list blocks on my page List1 and List2.

List2 is updated via an action button with a one-click-update event.

Upon its update, I’d like to refresh List1.

Here is the code I put in the header of the page, but it doesn’t seem to work…

<script>
window.addEventListener('block-loaded-List2', () => {
  window.addEventListener('update-record-success-List2', () => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('reload-block-List1'));
    }, 3000); // 3000 milliseconds = 3 second
  });
});
</script>

Please, advise.

Thank you!

27

Hi Boris,

Two things:

  1. An id of a block can’t have capital letters so it should be:
<script>
window.addEventListener('block-loaded-list2', () => {
  window.addEventListener('update-record-success-list2', () => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('reload-block-list1'));
    }, 3000);
  });
});
</script>
  1. if list1 is a dynamic block labeled as “Beta” the event is not reload-block-list1 but reload-list1
28

Thank you @matthieu_chateau for your feedback. It was indeed the capital letters in the block name that was causing it. The script now does what it is supposed to - executing an action button on one block causes the other to reload.

However, I get an error message out of corner pop-up:

image

The second list block that is supposed to reload has conditional visibility on it with the condition checking the value of the field that the first block’s action is updating. That’s the whole point of reloading the second block, so that it can pick up on the value updated by the first block’s action and, consequently, reveal or hide data.

So, there should not be an error reported. How would you recommend I should deal with it?

Thank you

29

I think what I need to do is auto-reload the entire page, not just list block1.

Any advise on changing this code to reload the entire page?

Thank you

30

Yes,

<script>
window.addEventListener('block-loaded-list2', () => {
  window.addEventListener('update-record-success-list2', () => {
    setTimeout(() => {
      window.location.reload();
    }, 3000);
  });
});
</script>
1 Like
31

This did the trick. No error messages! Thank you, @matthieu_chateau !

1 Like
32

Thanks @matthieu_chateau, I needed this one as well!

1 Like
33

Hi @matthieu_chateau & community.

I have a similar requirement in a different page of my app - the page carrying the user profile update form. I need the page to reload after an update to the form because I have another block above the form with conditional visibility warning the user that all the fields need to be filled out for the app to work correctly. By default, the block’s conditional visibility does not kick in based on the update of the profile form - hence the need to reload the page.

I’ve tried the block above with the following modification, but it doesn’t work. I suspect it’s because it’s a different type of block. The block is called “user-accounts1”.

<script>
window.addEventListener('block-loaded-user-accounts1', () => {
  window.addEventListener('update-record-success-user-accounts1', () => {
    setTimeout(() => {
      window.location.reload();
    }, 3000);
  });
});
</script>

Would someone please advise on how to cause this page to reload?

Thank you

34

Hi!

Can you try this one (to be inserted in the header custom code of the page settings):

<script >
    function handleRedirect() {
        var elem = document.querySelectorAll('button[type=submit]')[0];
        if (!elem) {
            return;
        }
        window.setInterval(function() {
            if (elem.querySelector('.success-icon')) {
                setTimeout(() => {
                    window.location.reload();
                }, 3000);
            }
        }, 500);
    }
    window.addEventListener('block-loaded-user-accounts1', () => {
        handleRedirect();
    });
</script>
35

Yes, that did it. Thank you @matthieu_chateau

Softr team, I’ve been thinking there so much interest in the community to have blocks and pages updated based on updates to other blocks. Would it be time for Softr to consider a more of a “native” approach and build in the ability to do these sorts of things by checking some checkboxes in the Studio’s UI, rather than resorting to these short JS injections that vary just so slightly depending on the use case and type of block? Just a thought :slight_smile:

Thank you!

3 Likes