Force check dirtyforms.js

Question

I'm trying to check for dirty form when swithing between tabs - and if the form is dirty, show the alert.

I'm using this plugin: https://github.com/snikch/jquery.dirtyforms

Ii works fine when trying to go to an external page (here i will get the warning), but when i switch between tabs(bootstrap), nothing happens. I have made a speciale class(".chkChange") to listen to if the form is dirty, but nothing happens when I click on a tab. The tabs looks like this:

<li class="setup-conditions"><a data-toggle="tab" class="chkChange" href="#setup-conditions">Procedure</a></li>

And i'm able to check if the form is dirt or not with this snippet, but i need help to trigger the alert build in dirtyforms:

$('#myTab li a').click(function () {
    if ($('form').dirtyForms('isDirty')) {
        //alert("Form is dirty");
    }
});

And like i said, if I put the same class on another (external) link, it will prompt if anything has been changed - bot not on the tabs.

Answer 1

In this case, you can customize the event binding to attach the click handler to your link.

$(document).bind('bind.dirtyforms', function (ev, events) {
    var originalBind = events.bind;

    events.bind = function (e) {
        $('#myTab li a').on('click', events.onAnchorClick);
        originalBind(e);
    };
});

Dirty Forms will then correctly

1. Check whether the form is dirty
2. If dirty, prevent the click event
3. Show the dialog
4. If the user decides to proceed, will refire the click event

Dirty Forms ignores your anchor tag by automatically because it has no HREF tag. This was a feature that was contributed by the community, that I am now reconsidering because apparently there is an argument to monitor anchor tags that don't have HREF sometimes.

Update

The default behavior has changed in 2.0.0-beta00005 to include links with no HREF tag by default. That should fix this so you don't need to attach the event. However, depending on what libraries you are using, you may need to add an ignoreSelector to Dirty Forms to stop watching them.

$('form').dirtyForms({ ignoreSelector: 'a.some-class:not([href])' });