Automatic modal closure after button pressed on it

Custom Coding
1

Hello!

I wld like to have a function of closing the pop-up modal after pressing the button on it and then refresh the main page after the closure

Code has been written below and being put on the modal page:

I put it on both header and footer, but there is no effect at all. Did anything I missed to initiate the change?

The real situation is out there, you can press any option and then the modal will pop up

Appreciate enlightenment from any expert.

Tks

Eric fm HKG

2

Hi Eric, what code did you use exactly? And where did you insert it? In the page where the modal is or in the page where you “activate” the modal?

3

Hi Matthieu, sorry! Forgot to put the code out there, here u go!

$(document).ready(function() {
$(“.modal__btn”).click(function() {
setTimeout(function() {
$(“.modal”).modal(“hide”);
window.location.reload();
}, 2000);
});
});

I tried to put both them on both header and footer. Anything shld it set to activate it?

Should I do anything on the main page to initiate the code?

4

Ok I will have a look

1 Like
5

Just remove the <> and u should able to see

6

Can you try this one

<script>
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>

To be inserted in the footer code of the page settings (in the page where the modal is open when you click on a list item). When closing the modal with the close button, it should reload the page.

7

Let me try and get back to you. Thank you very much🙏🏻

8

Good morning, here is your annoying reminder that setting a single timeout is going to create random hard-to-diagnose problems for your users who might be on a slower computer or just having intermittent network connectivity problems.

Instead, it’s better to use setInterval() with a test to see if the condition you’re waiting for has in fact occurred, and then clearInterval() to cancel the timer.

9

“Damn, he saw it!”. I will update this :sweat_smile:

2 Likes
10

Here it is @dcoletta

<script>
window.addEventListener('load', function() {
  var intervalSet = setInterval(function() {
    var e = document.getElementsByClassName("sw-modal-close")[0];
    if (e) {
      e.setAttribute('onclick', "MicroModal.close('sw-modal');  location.reload();");
      clearInterval(intervalSet);
    }
  }, 100);
});
</script>
5 Likes
11

@matthieu_chateau this is awesome, thank you for receiving my annoying feedback so gracefully!

3 Likes
12

Dear Masters,

I have tried, but there is not effect at all, just like Matthiew said, I put it on the list page, where the modal would be triggered. Here enclose the pict showing how I put it on the customs code:

image
image868×677 120 KB

Also, I enclose a clipping of how’s the response on the page.

Hope you can give me some clues how to make your great code activated! I think this function should help a lot of other Softr users. :smile:

13

I have just been aware that after pressing the X button on the upper right hand corner, after closure of the modal page, the master page refresh automatically. Therefore, the code seems to be effective in a way, but not totally.

Probably, there is something missing to really kick off the first part of the code.

14

Mmmmm this is what does the code = on click on X it reloads the parent page, only this :thinking:. Not on form submit

1 Like
15

@Viktoria Could you please kindly check with your technical team and ask for their advice, how the code should be adjusted in order to be effective with the modal page. I think this small enhancement could help a lot of users to create a better customer journey. Appreciate your kind assistance as usual :pray:

16

Just a quick verification: all the blocks (specifically the list block) are rightly updated?

If they are rightly updated, could we check the page? (A link to the live version would be the best)

17

Hi @twmeric :wave:
As Matthieu mentioned, would you mind sharing the link to the List block page of Published app, so I could review the custom code with the tech team?

18

Hi @Viktoria & @matthieu_chateau , here it comes with the real link that you can test and play: Update Link

The after closure refresh is performing just like what I want it to be, it refreshes and goes back to the particular position of the page so user don’t need to scroll.

Therefore, what I miss is the closure of the modal page, where there should be two things happen upon pressing it:

  1. send out data to airtable (as it always does)
  2. close itself 2 seconds after showing the green wordings which indicates a successful update

I wonder if the highlighted part need to be addressed with some codes.

Hope the above details would help working out the viable code which should enhance user experience a lot - a few lines of code can make a huge difference. Nice weekend!

19

Does this work with the side-modal? I have put this in my main-page footer. When I close the modal, it doesn’t refresh the page though.

Here’s what I’ve got in my footer of the main page:

Screen Shot 2023-03-24 at 4.09.35 PM
Screen Shot 2023-03-24 at 4.09.35 PM1664×450 53.1 KB

20

Hi @twmeric,

Here the code you need to insert in the page that will be used as a popup and where the form is (so not to be inserted in the parent page)

<script>
document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('submit-form-success-form1', () => {
    window.parent.location.reload();
  });
});
</script>

Just change form1 by the name of your form

@flavi Just to be sure, you want the page to refresh after clicking on this X button (the close button) or after a form submission? If after a form submission: just do exactly like I wrote above.
If it’s on close modal action (so with the X button), I dont have any solution and I won’t do it (I realize there is no sense to have such action)

1 Like