Automatic modal closure after button pressed on it

Custom Coding
42

Hi Rebecca,

The event listener for add record should be submit-form-success-listxx for now, from the latest news I know (though I have to test it - UPDATE = It is indeed submit-form-success-listxx listxx being the id/name of your block)

If you have issues to build the correct script, I can do it for you by replying here. If so, would you mind giving me the name of the block where the add record button is?
Also this block is inside a modal? You want to reload the parent page or the child page? (child page being the modal page)

43

Hi @matthieu_chateau thanks for your reply and offer to help! So I do have it reloading once the add record is submitted. The block and add record are in the same block and on the same page.

window.addEventListener('submit-form-success-requests-list', (e) => {
	console.log('add record success', e.detail);

    sessionStorage.setItem('scrollPosition', window.scrollY || window.pageYOffset);

    // Trigger the page reload
    window.location.reload();
});

However it’s not allowing for a delay in load. I tried this and it didn’t pause on reload

window.onload = function() {
    if (sessionStorage.getItem('scrollPosition') !== null)
        window.scrollTo(0, sessionStorage.getItem('scrollPosition'));
}

window.addEventListener('submit-form-success-requests-list', (e) => {
	console.log('add record success', e.detail);

    sessionStorage.setItem('scrollPosition', window.scrollY || window.pageYOffset);

    // Trigger the page reload
        setTimeout(() => {
        window.location.reload();
    }, 15000);
});

Thanks for your help!

44

Please try this one (delay of 1500 milliseconds - 1.5 seconds)

window.addEventListener('submit-form-success-requests-list', (e) => {
    console.log('add record success', e.detail);

    sessionStorage.setItem('scrollPosition', window.scrollY || window.pageYOffset);

    setTimeout(() => {
        window.location.reload();
    }, 1500);
});
45

Or this one as I think you want to automatically scroll to the stored position

window.addEventListener('submit-form-success-requests-list', (e) => {
    console.log('add record success', e.detail);

    const scrollPosition = window.scrollY || window.pageYOffset;
    sessionStorage.setItem('scrollPosition', scrollPosition);

    setTimeout(() => {
        window.scrollTo(0, scrollPosition);
        window.location.reload();
    }, 1500);
});
46

Hey Matthieu
Were the sign-in and sign-up listeners added? if so, what were they and could you update your code?

47

I have to check some details with the team before.
There will be a specific thread inside the guides and help section of the community.

48

As promised, here it is : Complete guide: Redirect users to the page they were before signing up/signing in + use case

1 Like
49

Thank you so much Matthieu!

50

Hi everyone, sorry to hijack the thread :slight_smile: but I have an issue that is related so the experts here may know the answer. The issue is here: Actions based on server time - #2 by Fabio but I also can do the summary here:

Summary → I need to be able to add a custom validation code at the event listener of the update record button such that if my validation fails the user won’t be able to update, the data never gets sent to airtable, and the only option the user has is to cancel.

I think the discussion on this thread gets very close to what I need to do, but doesn’t get quite there. Any ideas from the experts?

Thanks a lot!

51

What about buttons on external iframe pages?

I Would like a button on my external iframe page to close the modal.

I tried with windows.addEventListener using a custom even dispatched from the iframe page window.dispatch but it doesn’t work…

My usecase: When the modal is open, it is updateing a DB and I would like a “Close” button to close the modal and refresh the parent page. Right now, it is worning fine with the X icon but I would like to also have a button to close the modal.