Dirtyforms stop working after I open and close a modal

Question

I have a form where I want to warn the user to save their data. it is done with Dirtyforms.

I have a button in my form, that opens up a modal dialog with some extra form. So,
1. I open my form dialog
2. edit (or not) my new form in the dialog
3. close the dialog
4. return to my first form and click away. The dirtyforms not warns me about losing my data.

I checked it in debug mode, I see in my console this:

[DirtyForms] Adding form w0 to forms to watch
[DirtyForms] Storing original value for _csrf
[DirtyForms] Storing original value for Prenajom[r1]
[DirtyForms] Entering: Leaving Event fired, type: click, element: http://k.local/..., class: btn btn-default popup-addon-table and id:
[DirtyForms] Leaving: Not dirty
[DirtyForms] Clearing the beforeunload event

At opening a modal, it fires the leaving event. How can i prevent it?

Thanks!

Answer 1

By default, all anchor tags (<a>) get an event attached to them that fires the dialog because there is no reasonable way to differentiate between an anchor that leaves the page and one that does not. If you have anchor tags that do not navigate away, you should ignore them so they don't fire the dialog.

Option 1

Set the ignoreSelector option to ignore specific fields, anchors, or buttons.

$('form').dirtyForms({ ignoreSelector: 'a.ignore-me' });

Option 2

Alternatively, add the value of $.DirtyForms.ignoreClass to any elements you wish to ignore, and Dirty Forms will ignore them.

$('#ignored-element').addClass($.DirtyForms.ignoreClass);

Option 3

If you want to ignore more than one element at a time, you can add the value of $.DirtyForms.ignoreClass (with the default value dirtyignore) to a containing element.

<div class="dirtyignore">

    <!-- Everything here will be ignored - anchor, input, textarea, and select -->

</div>

Answer 2

I have received an answer from @NightOwl888, that solved my problem:

"One thing wrong with your setup is that Dirty Forms should always be the last jQuery plugin in the stack as noted in the docs. If you are attaching an event to the button after initializing Dirty Forms, it might not be ignoring correctly."