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!

4 Likes
36

Here we go again. :slight_smile:

I tried the code snippets above but none of them work in this particular use case - a list block with an action button calling an API.

Softr support stated this code won’t work with an action button calling an API. Different code should be used.

Coincidentally, I’ve watched the recent video of JJ and Michael (Sofrr + Xano) and JJ at frame 37:26 gently glides over this nuance :wink: - I am just going to refresh the page…

But in any real app, a user cannot be expected to be refreshing pages after clicking buttons.

For my use case, if anyone can recommend the variation of the code I can insert to make Softr refresh the block after the action button’s api call, that would be great.

More broadly speaking, if Softr could come up with ways to auto-refresh blocks after various action button types and do it more natively, without code injections, that would be great!

Thanks

1 Like
37

Hello Community. Softr support pointed me to the documentation. The code that needs to be injected in the header is indeed documented. It can be found here:

Thanks Softr Support team!

PS
It’s not the most sophisticated way of handling API responses. In other words, it doesn’t really “wait” for the API to respond and does not parse the response. It just waits an X number of seconds and reloads the block. Not ideal, but does the job, if you are willing to wait long enough to have whatever workflow you have behind your webhook do its job and do in on time and before the block gets reloaded…

38

I’m new to softr, and am trying to use the aforementioned code to help update my list block after I push the Call API button which I named “Like”. The dynamic list block name is “availablereferrals”.

I posted this code into the header, but it is not refreshing the list. Can someone help?

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

Good day all,
Can anyone help update my pages so they refresh please like you discussed in the thread? My use case is not shown and I urgently need it done please. Use case is as follows:
I have a page with 2 blocks:
BLOCK-ID 1 = custom-code3 (which is a simple form using fillout.com and 1 button to submit the form. When submitted Fillout generates a “SUCCESS” page. When this happens I need to refresh the entire page OR when this happens I need to refresh only the second block on the page which is:
BLOCK-ID 2 = table1, which shows the Airtable record that is being updated (statuses update and show on the block).

That’s all.

If I submit and refresh manually, the status can be seen updating correctly, I simply want the refreshes to be automatic, maybe every 1 second or so.

Hope you can help. I am on the Softr Business plan, so I have access to most features I think.

40

Listening for events on your fillout embeded form and then fire events accordingly on your softr page has been very elusive due to browser cross origin policies, although it is for a good reason.

But I guess there has to be alternatives to explore.