Issue in conditionally preventing the default action of anchor tag

Question

There is an anchor tag: inventoryHome which takes the user to a different page.

If the size of rateMap is greater than 0, I need to show a confirmation pop-up confirming if the user wants to discard the unsaved changes.

The method navigateToInv() is called if the user confirms the discard.

In the code below, though the navigateToInv() method is called & the click event is getting triggered, the page is not navigating to the new page.

<li><a href="<%=request.getContextPath()%>/inventory" id="inventoryHome"> <spring:message code="inventoryTab" /></a></li>

    $('#inventoryHome').click(function(e) {
            if (Object.size(rateMap) > 0) {

                e.preventDefault();
                showDiscardConfirmationPopUp(navigateToInv, false);
            }
        });

    var navigateToInv = function (){
        rateMap = new Object();
         $('#inventoryHome').trigger('click');
    }

 Object.size = function(obj) {
     var size = 0, key;
     for (key in obj) {
         if (obj.hasOwnProperty(key)) size++;
     }
     return size;
 };

Not able to identify the issue.

This seems awfully convoluted. What if you grabbed the current href from the anchor and did a document.location.href= thatUrl? — Steve H., Feb 08 '13 at 05:49
Thanks Steve. Such a simple & straightforward way to achieve it. :) — Shikha Dhawan, Feb 08 '13 at 05:59
Will answer how I achieved the same once I am allowed to answer that is after 2 days. — Shikha Dhawan, Feb 08 '13 at 06:28

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

The problem is that calling trigger('click') on an anchor tag does not cause it to navigate to the page specified by the href value. See this answer.

You either have to set window.location to the href value, or change the logic so you call e.preventDefault() only after the user has chosen not to discard the changes, like this:

$('#linkId').click(function(e) {
    if (hasUnsavedChanges() && !confirmDiscard()) {
         e.preventDefault();
    }
}

In your case it would be:

$('#inventoryHome').click(function(e) {
    if (!$.isEmptyObject(rateMap) && !confirm("Discard changes?")) {
        e.preventDefault();
    }
}

edited May 23 '17 at 12:12

Community

1
1

answered Feb 08 '13 at 06:21

John S

21,212
8
46
56

Thanks. Now I understand the issue. Incorporating all the comments, I achieved the same as: `var navigateToInv = function(){ document.location.href= $("#inventoryHome").attr('href'); } $('#inventoryHome').click(function(e) { if (Object.keys(ratePopUpMap).length > 0) { e.preventDefault(); showDiscardConfirmationPopUp(navigateToInv, false); } });` – Shikha Dhawan Feb 08 '13 at 06:25
Object.keys(rateMap) has issues with IE. (http://forum.jquery.com/topic/object-keys-fails-in-ie8) Thats the reason I did not accept the answer. – Shikha Dhawan Feb 13 '13 at 11:08
@Shikha - The point of the answer is that `trigger()` will not work in your case. I showed `Object.keys()` in the code because you put that in your comment above. Your original code already had a function to test if `rateMap` had any properties, but I think you could use `$.isEmptyObject()` instead. – John S Feb 13 '13 at 19:07

score 0 · Accepted Answer · answered Jul 16 '13 at 06:34

I achieved the same as:

var navigateToInv = function(){
    document.location.href= $("#inventoryHome").attr('href'); 
} 
$('#inventoryHome').click(function(e) { 
    if (Object.keys(ratePopUpMap).length > 0) {
     e.preventDefault(); 
     showDiscardConfirmationPopUp(navigateToInv, false);
     }
})

score -1 · Answer 3 · answered Feb 08 '13 at 05:52

-1

The issue appears to be that rateMap isn't ever changing to be <= 0. So even once you call the click() method manually, it's still following the chain that disables the default action, which is why it doesn't redirect to the desired page. You should add another state variable that starts out true, so it triggers the prevent default branch, and then is set to false immediately before the manual call of click() within navigateToInv().

answered Feb 08 '13 at 05:52

Joe C.

1,538
11
14

rateMap = new Object(); in navigateToInv() does set it to zero. – Shikha Dhawan Feb 08 '13 at 06:01

Issue in conditionally preventing the default action of anchor tag

3 Answers3