I want to control whether a link is clickable or an error should be displayed (Based on result of an ajax call).

<a class="lnkCustomer" href="http://localhost/viewcustomer" target="_blank" data-customerno="237">View</a>

I get to the point where I am able to set the link as "allowed to be clicked":

// Authorized
anchor.data("authorized", true);

However when I run this code, the link still does not open. Ideally once the ajax call is complete, it should invoke the click event. I believe the issue is in this line.

// Trigger Anchor
anchor.click();

This is the entire code:

<script type="text/javascript">

    $(".lnkCustomer").click(function(e)
    {

        var customerNo = $(this).data('customerno');
        var anchor = $(this);

        // Check for authorized
        if (anchor.data("authorized"))
        {
            return true;
        }

        $.ajax(
        {
            url: 'http://localhost/checkcustomer',
            type: 'POST',
            dataType: 'json',
            data: { customerNo: customerNo },
            cache: false,
            success: function (result)
            {
                if (result.success)
                {
                    // Authorize
                    anchor.data("authorized", true);
                    // Trigger Anchor
                    anchor.click();
                }
                else
                {
                    // Show a message in a alert or div
                    alert('Not authorized');
                }
             }
        });

        // Default to false (Do not process anchor)
        return false;

    });

</script>

Notes: I am using class instead of id in the anchor because I have various links that will trigger this event. However as you can see, this should not be an issue since I am always referring to the individual object:

var anchor = $(this);

CodePudding user response：

I think we cannot overwrite the default behavior of the anchor tag but we can work around it. In this solution, I have replaced href with data-link. And mimic the anchor mechanism with window.open.

Code :

<a class="lnkCustomer" data-link="http://localhost/viewcustomer1" data-customerno="111" data-auth>View</a>
<a class="lnkCustomer" data-link="http://localhost/viewcustomer2" data-customerno="237" data-auth>View</a>
<a class="lnkCustomer" data-link="http://localhost/viewcustomer3" data-customerno="237" data-auth>View</a>
    <script type="text/javascript">
        $(".lnkCustomer").click(function (e) {
            var customerNo = $(this).data('customerno');
            var linkToGo = $(this).data('link');
            var anchor = $(this);
            // Check for authorized
            if (anchor.data("authorized")) {
                var win = window.open(linkToGo, '_blank');
            }else{
                $.ajax(
                {
                    url: './checkcustomer.php',
                    type: 'POST',
                    data: { customerNo: customerNo },
                    cache: false,
                    success: function (result) {
                        if (result == 'authorized') {
                            anchor.data("authorized", true);
                            var win = window.open(linkToGo, '_blank');
                        }
                        else {
                            // Show a message in a alert or div
                            alert('Not authorized');
                        }
                    }
                });

            }
        });
    </script>

Please note :

1. You can use CSS to style the anchor tags, which I have not in the solution
2. One method I tried was with use of preventDeault, but it do not work

CodePudding user response：

You didn't prevent the default event from what is shown. Try using the e.preventDefault()