I found a jQuery plugin some time back called "Dirty Forms" that helps prevent users from navigating away from a page when the form has been altered, without a save.

There is a Drupal project that is out dated (and yes there is a Drupal 7 patch that doesn't seem to work very well).

I was able to fairly easily implement the jQuery on forms, but I'm having an impossible time with TinyMCE text areas. Since each of these gets deployed into its own iFrame, it's proving to be very VERY difficult to use Javascript / jQuery outside of the iFrame to monitor the contents inside of the iFrame for changes.

In other words, when a user types in the text area that TinyMCE generates, the Dirty Forms plugin doesn't see that change, and doesn't properly flag the form as edited, and the user can march right off the page without a warning.

We've also experimented with the Node Edit Protection module, but again, not very widely maintained or used, and it doesn't seem to work as well as Dirty Forms cross browser.

I'm wondering if anyone has any advice about this issue, possibly if you have implemented Dirty Forms yourself, or have any thoughts on monitoring the contents of the WYSIWYG editor inside of the iFrame.

Love WYSIWYG, just trying to add some user experience enhancement to help users not lose their content.

Much appreciated!


TwoD’s picture

I have not implemented Dirty Forms myself so I'm not familiar with exactly how it works, but I'm assuming it listens to the usual change/focus/blur events to set its flags.

Some of the editors have an onChange/nodeChanged event, or similar, one can hook into to know when something was typed or selected in the editor. You could use that to notify Dirty Forms it needs to change its flags.

But that requires interfacing directly with the editor's API, we don't have an equivalent cross-editor event triggered by Wysiwyg module. I've tried to implement one before, but not all editors had APIs which supported it, and I didn't have time to re-implement it for each editor at the time.