Incompatible with AJAX? [#372730]

I really love what this module does, but it appears to be activated even when changing the page with AJAX. Two example's I've found are:

1) When using the "tabs" module, switching between tabs brings up the warning
2) When opening and closing field groups on a node edit form brings up the warning

There is also something weird when you use the image upload in CCK that it can be activated.

As you can imagine, with large node create pages this can get very tiring and tedious having to click "ok" numerous times... to the extent I've had to deactivate this otherwise great module. Is there any way to force it to only recognise moving to a new page, and not just loading new information with AJAX?

I'm using Safari, but haven't tested if this issue is browser based or not yet...

Many thanks for your hard work!!

Comments

Comment #1

charlie-s commented 10 December 2012 at 16:11

I'm toying around with the node-edit-protection.js file to make it work with more fields. Specifically, I can't get it to work with the "Remove" button on a managed file. I had to add this code to get it to work with checkboxes and radio buttons as they have no blur event as far as I can tell:

      $('.node-form :checkbox, .node-form :radio').click(function() {
        edit = true;
      })

Playing with $().live('click', function() { ... }); for ajax items seems to work fine. Just can't get that damn "Remove" button to work. I'm assuming that the core ajax handler for that button is doing a preventDefault() which won't allow other handlers to do anything with it.

Comment #2

charlie-s commented 19 October 2012 at 21:38

After some revisions, this is working really well for all form elements that I can think of at the moment + ajaxed in elements and managed files. This is D7 version.

(function ($) {

  var submitAllowed = false;
  var formEdited = false;

  Drupal.behaviors.nodeEditProtection = {
    attach: function (context) {

      // If they leave an input field, assume they changed it.
      $('.node-form :input').each(function() {
        $(this).blur(function() {
          formEdited = true;
        });
      });

      // Checkboxes and radios only require a click.
      $('.node-form :checkbox, .node-form :radio').click(function() {
        formEdited = true;
      })

      // Managed files have remove + upload buttons.
      $('.image-widget-data .form-submit').each(function() {
        Drupal.ajax[$(this).attr('id')].options.beforeSubmit = function () {
          formEdited = true;
        }
      });

      // Let all form submit buttons through.
      $(".node-form .form-actions input[type='submit']").each(function() {
        $(this).click(function() {
          submitAllowed = true;
        });
      });

      // Stop link clicks.
      $('a').live('click', function() {
        if (formEdited && !submitAllowed) {
          return (Drupal.t("You will lose all unsaved work."));
        }
      });

      // Handle backbutton, exit etc.
      window.onbeforeunload = function() {
        if (formEdited && !submitAllowed) {
          return (Drupal.t("You will lose all unsaved work."));
        }
      }

    }
  };
})(jQuery);