Released form keeps on saving data

[fzaninotto]

Here is my situation. I have a server-side data transformer which takes YouTube URLs, and transforms them into YouTube iframes. This way, users can add an URL in a textarea and get a nice video on the resulting page.

Sisyphus breaks this. The reason? When a user submits the form, the form is released, but the listeners aren't removed. As a consequence, the form continues to save data. I have configured a short timeout for sisyphus (a few seconds) and the server page takes a few seconds to response. Most of the time (but not always), the textarea is saved again after submission. So even if the server returns an iframe instead of a URL, the next time the form appears, sisyphus reloads the saved data and overrides the iframe with the url. The data is saved correctly, but the display to the user is wrong.

Long story short, listeners on a form must be removed when a form is released.

[fzaninotto]

As a mitigation measure, we disable persistence after release:

var sisyphus = $('form').sisyphus({
    locationBased: true,
    onRelease: function() {
        // disable save after release
        this.saveToBrowserStorage = function() {};
    }
});

[simsalabim]

@fzaninotto thanks for pointing me this out, hope I'll fix it soon. Btw great hacky solution 👍

[Khrystyna]

I have a similar situation. I remove form dynamically and suggest that it's gone. But DOM element still exists in this.targets array. If I return back to view with this form again, I get two targets. Possible way to omit this can be adding listener to form element for "remove" event and cleaning everything at that point.

[simsalabim]

The fact the solution was found somehow kept me away from implementing a proper fix. I am hoping to revise the way plugin binds to forms.