Behaviour of SOFTR buttons efficiency?

Hi there,

I just build a piece of code that adds in a refresh page after making an API call by the user clicking a specific button. I found that standard event listeners dont quite work to target a button as the button is generally loaded in way after the script is loaded (or dom in general). My current solution to add in a refresh after pressing a button is :

document.addEventListener('DOMContentLoaded', function() {
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                var button = document.querySelector('button.nw87ex7.nw87ex8[data-action-id="_z3em1ej4o"]');
                if (button) {
                    console.log('Button found');
                    button.addEventListener('click', function() {
                        console.log('Button clicked');
                        setTimeout(function() {
                            console.log('Reloading page');
                            location.reload();
                        }, 9000); // 9000 milliseconds = 9 seconds
                    });
                    observer.disconnect(); // Stop observing after finding the button
                }
            }
        });
    });

    // Observe the entire document for added nodes
    observer.observe(document.body, { childList: true, subtree: true });
});

Is there a better way to do this? I have more API call buttons i want to have a refresh action on (i know the standard update record button has already this built in functionality)

Hi Marc,

Can you describe more precisely what you would like to do?

Click a Softr button that should trigger a page reload? The perfect use case would be to reload the page or to reload specific blocks?
What is this button? A button of a list-details block? a button of a list block? If of a list block, is it a top bar button or an item button?

There are some improvements to do to the code you provided, I just need to know exactly what’s involved to give you the correct script + the correct explanation (indeed, standard event listeners are not efficient at all, Softr has its own event listeners)

Thanks Matthieu,

So it is a List Details block that has an action button “open external URL”. In that URL is a webhook that ensures hocus pocus happens to the underlying data. The modal that it opens when opening the external URL shows a succes message if the hocus pocus worked. After 9 seconds it should refresh the block to give the hocus pocus enough time (or page in how i did it, whatever works and is most user friendly). The reason for the refresh is that the list details block doesnt get updated with the new data after hocus pocus since its an external url call.

Okay can you try this one instead (to be inserted in the header custom code of the page where your list details is).

Replace list-details1 by your block id (line 2 and line 9)

I assume your list-details block is a new list-details block? Labeled as Beta?

<script>
window.addEventListener('block-loaded-list-details1', () => {
    var button = document.querySelector('button.nw87ex7.nw87ex8[data-action-id="_z3em1ej4o"]');
    if (button) {
        console.log('Button found');
        button.addEventListener('click', function() {
            console.log('Button clicked');
            setTimeout(function() {
                window.dispatchEvent(new CustomEvent('reload-list-details1'));
            }, 9000);
        });
    }
});
</script>

If it works I will give you the best practices

its not working, I made a few assumptions, please correct or teach me if i am using this wrong:

  • i added the code in the header under settings > Custom code > code inside header.
  • The block ID is the name i called it when i click on the block and look on the top right?

It is a new list details beta block yes.

Yes and yes,

It should work but let’s try another one, tested and worked (list-details1 appear 2 times this time)

It will reload the page after 9 seconds

<script>
window.addEventListener('block-loaded-list-details1', () => {
    var button = document.querySelector('#list-details1 .nw87ex7.nw87ex8');
    if (button) {
        console.log('Button found');
        button.addEventListener('click', function() {
            console.log('Button clicked');
            setTimeout(function() {
                location.reload();
            }, 9000);
        });
    }
});
</script>

Hey Matthieu, this is super helpful!

I can’t get it working for the new Beta, List ‘Grid’.

Would anything change?

I also noted in this reply you mentioned you’d added list-details1 3 times, but I can only see it twice?

Thanks!

Indeed, the selector for a list block might not be the same.

I corrected it, it would appear 3 times if there was a block reload. Here it’s a page reload. (Though the number of times doesn’t have any importance as it depends on what the script is supposed to do)

That being said now this method is not to be used anymore for call API as their own event listeners were introduced recently:

	window.addEventListener('call-api-success-BLOCKNAME', (e) => {
		console.log('call-api-success', e.detail)
	});
	
	window.addEventListener('call-api-failure-BLOCKNAME', (e) => {
		console.log('call-api-failure', e)
	});