GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.94k stars 393 forks source link

Disable 'Leave Site?' Message? #556

Closed chud37 closed 4 years ago

chud37 commented 4 years ago

I've modified the code so that the form does not save async but inline with the form and submits the page, like a regular HTML form.

To do this, I've modified the save function (given on the tutorials page) from this:

// Collect the contents of each region into a FormData instance
payload = new FormData();
for (name in regions) {
    if (regions.hasOwnProperty(name)) {
        payload.append(name, regions[name]);
    }
}

To this:

var $form = document.getElementById("form-contenttools")
if($form.length) {
    window.onbeforeunload = null;
    var hiddeninput = document.createElement("INPUT")
    hiddeninput.setAttribute("type","hidden")
    hiddeninput.setAttribute("name","document")
    hiddeninput.setAttribute("value",regions[0])

    var form_submit_flag = document.createElement("INPUT")
    form_submit_flag.setAttribute("type","hidden")
    form_submit_flag.setAttribute("name","contenttools_form_submit")
    form_submit_flag.setAttribute("value",true)

    $form.append(hiddeninput)
    $form.append(form_submit_flag)

    editor.busy(false);
    new ContentTools.FlashUI('ok');
    $form.submit();
}

However, I've still get the alert message 'Leave site? Any changes you made will not be saved' after clicking the save button. To combat this I put the line window.onbeforeunload = null; In to the javascript (in various places) but this doesnt seem to be taking affect.

Any ideas?

cyclaero commented 4 years ago

This might be related to #510, which has been fixed by the recent new release 1.6.11.

Did you update your ContentTools to 1.6.11? In case yes, this may be a caching issue of the browser (still got the old ContentTools and didn’t come to load the new one) - this happens quite frequently to me. For excluding the latter, either disable the browser cache or open your page in privacy mode.

anthonyjb commented 4 years ago

So this is because your submitting a form (leaving the page before) whilst still in edit mode, because save is normally done asynchronously this isn't usually an issue (no page unloading), but in this case the form submission counts as leaving the page and the history stack is checked to see if it is clear or not (which it wont be in the cases you are seeing the alert) and the alert is shown. The history stack is reset after the saved event is called not before, so to resolve this in your saved event handler add the following:

editor.history._snapshots = []

This is a bit hacky but it wont do any harm, it clears any snapshots from the history which will prevent the leave page alert you're seeing from triggering.