AJAX loaded acf_form() prevent "reload" pop-up when dismissed

• elmediano

• July 3, 2017 at 12:56 am

Hi there!

I’m building a task manager for my web development agency using WordPress, ACF and FullCalendar.js.

Everything is progressing nicely but I’m having trouble with a small issue.

This is what happens:

1. You click on a day in the calendar.
2. A modal pop-up is displayed with the form, which has been loaded via AJAX.
3. One of the form fields is modified but you then change your mind and decide to dismiss the pop-up.
4. You click on the close button, the whole pop-up disappears and the element containing the pop-up is emptied via jQuery; no instance of that form exists on the page now.
5. You refresh the browser and a browser pop-up appears asking: “Do you want to reload this site? Changes you made may not be saved. [Don’t Reload] [Reload]

My question is, if I have dismissed the form and I’m emptying the element containing the ACF form, why is the browser still remembering that I modified the form?

Is this a browser, a WordPress or an ACF thing?

Thanks!

• elmediano

• July 3, 2017 at 1:03 am

Ahhhh my bad! I really should’ve researched a bit further before posting my question.

It is indeed a browser thing so, for anyone interested in avoiding this situation when it’s unwanted, simply use this bit of JS on your dismiss/close JS call:

// Remove navigation prompt
window.onbeforeunload = null;

Source: https://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch