Is it possible to force the parent page to refresh whenever a modal is closed?
1 Like
and retin what was in the search
Doesnāt involve search. List details page with buttons that open modals containing forms for various actions. Would like the main page with the details data to refresh whenever the modal is closed. As it is now, if a form is used to launch an automation that updates something on the page where the modal was launched, the user doesnāt see that itās been updated when closing the modal because the page doesnāt refresh.
Add this to Code inside footer of the parent page, not the modal page.
It adds refresh after you click the close modal button (assumes the āDo nothingā action is set for the modal)
window.addEventListener('load', function() {
setTimeout(function() {
var e = document.getElementsByClassName("sw-modal-close")[0];
e.setAttribute('onclick', "MicroModal.close('sw-modal'); location.reload();");
}, 1600);
});
</script>
PS Some apps need a pause before reload, perhaps to wait for an Airtable automation to complete:
e.setAttribute('onclick', "MicroModal.close('sw-modal'); setTimeout(location.reload.bind(location), 1600);");
1 Like
@cooper What do you mean by āDo nothingā action? I donāt see any modal options other than size.
I meant the do nothing option on Form submit within modal. Just laying out my use case since Softr tends to vary quite a bit, impacting code example. But may be of no consequence in this case!
Hi @cooper - so this doesnāt seem to work for modals now. Do you know if there have been any updates to reload if a modal is closed? Thanks!
@Jakob @rebeccajane Itās definitely not āNo Code,ā but you could probably use the sessionStorage mechanism of the Web Storage API combined with polling or a click event to refresh the parent page.
Hi Rebecca,
What type of modal are you talking about exactly? Is it a modal displayed in the center of the screen? A lateral modal? A modal of an action button (add/delete/update modals)?
The code still works for the modals displayed in the center of the screen
Hey guys
I wanted to share a recent update I made to a script weāve been using. Previously, our code was set to refresh the page whenever the modal was closed. However, I realized that this wasnāt always necessary and could be improved for efficiency and user experience.
The updated code now checks the URL of an iframe within the modal. The page will only refresh if the iframeās URL matches a specific pattern (in this case, āhttps://www.MYURL.com/app/ā). This ensures that the page refresh only occurs when itās truly needed, such as when specific content updates are made within the iframe.
I believe this update will streamline our interactions, reduce unnecessary page reloads, and enhance the overall performance of our application.
window.addEventListener('load', function() {
setTimeout(function() {
var e = document.getElementsByClassName("sw-modal-close")[0];
if (e) {
e.onclick = function() {
var iframe = document.querySelector(".sw-modal-iframe");
if (iframe) {
try {
var iframeURL = iframe.contentWindow.location.href;
// Check if the iframe is on a specific page
if (iframeURL.startsWith('https://www.MYURL.com/app/')) {
console.log("The iframe is on the correct page, closing modal and reloading the page");
MicroModal.close('sw-modal');
location.reload();
} else {
console.log("The iframe is not on the specified page, closing modal without reloading");
MicroModal.close('sw-modal');
}
} catch (error) {
console.error("Error accessing the iframe URL: ", error);
MicroModal.close('sw-modal'); // Close the modal even in case of error
}
} else {
console.log("Iframe not found, closing modal");
MicroModal.close('sw-modal');
}
};
}
}, 1600);
});
Me again! 
Following up on my earlier post about the modal refresh issue, Iāve got another little challenge Iām grappling with.
So, weāve got our modal doing its thing when you hit the close button. Cool. But what about when users just click outside the modal to make it disappear? Iām trying to figure out how to trigger the same actions (like the page refresh logic I mentioned earlier) for these āoutside clicksā as well.
Iām scratching my head a bit on this one. Has anyone here dealt with something similar? @matthieu_chateau
Thanks a bunch in advance!
I would love to hear if anyone has an answer for this as well. Thanks!
Hay @lea, could you please try this way?
window.addEventListener('load', function() {
setTimeout(function() {
document.addEventListener('click', function(event) {
let modalContent = document.querySelector('#sw-modal-content');
// Check if the clicked element is not inside the component
if (event.target !== modalContent && !modalContent.contains(event.target)) {
// Your staff goes here
console.log('Modal is closed');
}
});
}, 1600);
});
Thanks @Astghik, I tried this code but itās unstable, everything starts to bug and I can no longer access the modalā¦ Have you tested the code and succeeded?
<script>
window.addEventListener('load', function() {
setTimeout(function() {
document.addEventListener('click', function(event) {
let modalContent = document.querySelector('#sw-modal-content');
let closeButton = document.querySelector('.sw-modal-close');
if ((event.target !== modalContent && !modalContent.contains(event.target)) || event.target === closeButton) {
var iframe = document.querySelector(".sw-modal-iframe");
if (iframe) {
try {
var iframeURL = iframe.contentWindow.location.href;
if (iframeURL.includes('/app/generated') ||
iframeURL.includes('/generated-old') ||
iframeURL.includes('/app/traduction')) {
console.log("Fermeture du modal et rechargement de la page");
MicroModal.close('sw-modal');
location.reload();
} else {
console.log("Fermeture du modal sans recharger la page");
MicroModal.close('sw-modal');
}
} catch (error) {
console.error("Erreur : ", error);
MicroModal.close('sw-modal');
}
} else {
console.log("Iframe non trouvƩ, fermeture du modal");
MicroModal.close('sw-modal');
}
console.log('Modal is closed');
}
});
}, 1600);
});
</script>
Anyone figure out how to refresh page when clicking outside of modal to close (not the x)?
I have a button to open a fillout form in a modal. Once the user completes the form and they close the modal with the x it refreshes page with the below code so it updates the displayed data and removes the button for the form. If they click outside the modal to close the page it doesnāt refresh page with the up-to-date data and they are able to submit data again.
Thanks for any help you can provide!
<script>
window.addEventListener('load', function() {
setTimeout(function() {
var e = document.getElementsByClassName("sw-modal-close")[0];
e.setAttribute('onclick', "MicroModal.close('sw-modal'); location.reload();");
}, 800);
});
</script>
I actually had a similar use case and this is what Iāve come up with to account for clicking outside the modal. The only thing to note here is that Iām reloading at the block level, not the page. I do this mainly because itās typically cleaner and itās a better experience for the end user.
<script>
window.addEventListener('load', function() {
var intervalSet = setInterval(function() {
var closeButton = document.getElementsByClassName("sw-modal-close")[0];
if (closeButton) {
closeButton.onclick = function() {
MicroModal.close('sw-modal'); // Close the modal
// Instead of reloading the page, reload 'list10' block
window.dispatchEvent(new CustomEvent('reload-block-list10'));
};
clearInterval(intervalSet); // Clear the interval once the button is setup
}
}, 100);
// Use MutationObserver to watch for changes in the modal's visibility
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'aria-hidden') {
var ariaHidden = mutation.target.getAttribute('aria-hidden');
if (ariaHidden === 'true') {
// Modal has been closed, reload 'list10' block instead of the whole page
window.dispatchEvent(new CustomEvent('reload-block-list10'));
}
}
});
});
// Start observing the modal for changes in attributes
var modal = document.getElementById('sw-modal');
if (modal) {
observer.observe(modal, {
attributes: true // Configure observer to watch attributes
});
}
});
</script>
To Implement in Your App
- Add the above code to the custom-code footer of the parent page (the page you open the modal from).
- Rename the block ID from ālist10ā to the name of the block you want to reload when closing the modal.
MutationObserver for Modal: Sets up a MutationObserver on the modal (#sw-modal) to detect changes in attributes, specifically watching for changes in aria-hidden to determine if the modal is closed. This is used to catch closure actions not tied to the close button, like clicking the modal overlay.
Custom Event on Close: Whether the modal is closed via the button or an alternative method, it dispatches reload-block-list10 to trigger reloading of the list10 block without a full page refresh. So no matter how the modal is closed, the block list10 is reloaded.
To Reload Whole Parent Page
To reload the entire page instead of a block, you can use something like the code below.
<script>
window.addEventListener('load', function() {
// Set an interval to setup the close button enhancement
var intervalSet = setInterval(function() {
var closeButton = document.getElementsByClassName("sw-modal-close")[0];
if (closeButton) {
closeButton.onclick = function() {
MicroModal.close('sw-modal'); // Close the modal
location.reload(); // Reload the page
};
clearInterval(intervalSet); // Clear the interval once the button is setup
}
}, 100);
// Use MutationObserver to watch for changes in the modal's visibility
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'aria-hidden') {
var ariaHidden = mutation.target.getAttribute('aria-hidden');
if (ariaHidden === 'true') {
// Modal has been closed, reload the page
location.reload();
}
}
});
});
// Start observing the modal for changes in attributes
var modal = document.getElementById('sw-modal');
if (modal) {
observer.observe(modal, {
attributes: true // Configure observer to watch attributes
});
}
});
</script>
1 Like
Excellent,
I was trying desperately a few months back to refresh blocks by clicking outside of the modal, and not being able to do it was actually a good thing for my project, let me explain:
When you have a filtered list block and open a popup to make a record edit, then when the modal closes via [ X ] button, the block will refresh but it loses all the filtering.
Now if you make the edit, and close the popup by clicking outside of the modal, updated record wont refresh (no refresh-block event)ā¦but I can continue editing the next records without losing all the filtering.
I must say that for this use case I edit records with fillout form, and not the native softr edit record form, which leads me to a very important question:
Could I edit records via an external form popup and keep the filtering after making a block refresh event?
Are you able to keep the block filters when the block refreshes after closing the fillout popup form?
My case, after closing the popup modal, block refreshes but I lose all the filtered records.
Iām actually doing exactly this with the above code, using Fillout as well.
I have a list block (on the parent page), which is using a conditional filter (IF āprojectIDā IS āprojectID (from current record)ā. After accessing the modal and then clicking outside of it, it reloads the list block and maintains the conditional filtering.
Are you seeing different behavior in your app?