Problem to ignore a click with onClick button link

[lenamtl]

Hi,

I want to ignore click of a specific button <button id="add_city" class="btn btn-success btn-sm dirtyignore " type="button" onClick="location.href='someurl'" > ADD City</button>

I also have button links that look like this onclick="contacts.editContact(this,<?php echo $contact['contact_id']; ?>) I have read a lot of similar issues and I have tried some of suggestion to fix it with no luck. When the form is dirty and I click on this button it is giving an alert and not ignoring this button click...

I'm testing using Chrome

Thanks

[NightOwl888]

This question is similar to Jquery dirtyforms not working properly on DIV click and window.location.href. Using location.href in JavaScript requires some custom code in order to prevent it from executing until after the dirty checking is complete and/or the user confirmed they want to proceed.

[lenamtl]

Thanks I will check that. This will be nice that your script handle those case onclick is popular...

[NightOwl888]

onClick

Actually, no onclick is not "popular". Modern unobtrusive code uses event handlers that are attached from outside of the HTML (which can be overridden by jQuery). For example:

$('#add_city').click(function (event) {
    location.href = 'someurl';
});

It is recommended to not use the onclick attribute (although I have recently been made aware that some frameworks are still using it - see #107).

window.location and window.location.href

But that is beside the point because the issue here is that you are using location.href, which is bypassing Dirty Forms.

I believe a fix for this is a feature we should have. However, I have checked and it seems that there is no way to override the window.location or window.location.href setters globally in the browser.

So the only real choice here is to add a method to Dirty Forms to call instead of window.location.href.

$.DirtyForms.location = 'someurl';
// or perhaps
$.DirtyForms.location.href = 'someurl';

It is possible to override the window object in your application code by using a closure to redefine the window object.

var _window = {
    set location (url) {
        alert(url);
        window.location = url;
    }
};

(function (window) {
    // In this context, the window object is acutally calling _window
    // so you will get an alert before navigating to the URL.
    $('#test-nav').click(function () {
        window.location = 'someurl';
    });
}(_window));

Unfortunately, it doesn't seem like there is a simple way to clone the whole window object and override window.location, window.location.href, window.location.assign(url) and window.location.replace(url), which is what would need to be done as a universal solution by anyone that uses this hack. The best that can be done is to re-implement jQuery extend in order to extend it with getters/setters, and I am not even sure if that would mean that the entire window object would still work.

So, I am upgrading this to a feature request. We need at minimum to implement something like $.DirtyForms.location that does the dirty check, opens the dialog, and continues to the URL that is passed to avoid the mess by using event customization that is currently required.

Hopefully, some JavaScript guru can provide a more reasonable solution to put into the documentation as a drop-in replacement for window.location than what I have come up with so far.

References:

• https://bugs.jquery.com/ticket/6145

[lenamtl]

Thanks a lot, I will check future releases.

For now, I'm using another dirty script, which I have customized.

[pelowe]

Not sure if this helps or not...

$('#add_city').click(function (event) {
    event.preventDefault();
    location.href = 'someurl';
})