MattyMc MattyMc - 28 days ago 7
Ajax Question

Prevent Default Behavior or A Tag Click Event in JavaScript Inside Ajax Call

I have used

e.preventDefault()
in the past to cancel a click event, but I am having trouble figuring out why it isnt working in this scenario. I assigned all a tags in a column with a classname, then get references to them with
document.queryselectorAll(.classname)
, then for each a tag add a click event that gets values from server, and if validation not met should prevent default and give user message.

(function(){
const userName = document.getElementById('FullName').value;

// route
$route = '';
if (CheckDeploy(window.location.origin)) {
$route = '/x/GetReviewerCheck/';
} else {
$route = '/servername/s/GetReviewerCheck/';
}

let ReviewButtons = document.querySelectorAll('.verifyReviewer'); // .verifyReviewer = className of all a tags in table column

for (var i = 0; i < ReviewButtons.length; i++) {
const ReviewButton = ReviewButtons[i];
ReviewButton.addEventListener('click', function (e) {
let newRow = ReviewButton.parentElement.parentElement;
let AuditorName = newRow.cells[2].innerText;
let ReviewType = newRow.cells[8].innerText;

let ReviewTypeID = 0;
if (ReviewType == 'Peer Review') {
ReviewTypeID = 3;
} else if (ReviewType == 'Team Leader Review') {
ReviewTypeID = 4;
}
else if (ReviewType == 'Supervisor Review') {
ReviewTypeID = 5;
}

let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1];

$.ajax({
url: $route,
type: 'POST',
data: { userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id },
success: function (data) {
// if data is 1, prevent default
if(data == 1){
e.preventDefault();
return false;
}
}
});

}, false);
}
})();

Answer

It's not working because, the response is asynchronous. e.preventDefault() will be executed only after ajax call gets a response from the server. You can do this.

  1. Prevent Default action for all actions.
  2. Wait for response.
  3. If response is not 1 then unbind the preventDefault().

I have updated the for loop, and commented the changes. Kindly do check.

for (var i = 0; i < ReviewButtons.length; i++) {
        const ReviewButton = ReviewButtons[i];
        ReviewButton.addEventListener('click', function (e) {
            let newRow = ReviewButton.parentElement.parentElement;
            let AuditorName = newRow.cells[2].innerText;
            let ReviewType = newRow.cells[8].innerText;

            let ReviewTypeID = 0;
            if (ReviewType == 'Peer Review') {
                ReviewTypeID = 3;
            } else if (ReviewType == 'Team Leader Review') {
                ReviewTypeID = 4;
            }
            else if (ReviewType == 'Supervisor Review') {
                ReviewTypeID = 5;
            }

            let id = newRow.cells[0].firstChild.getAttribute('id').split('_')[1];

            $.ajax({
                url: $route,
                type: 'POST',
                data: { userName: userName, auditor: AuditorName, reviewType: ReviewTypeID, recordID: id },
                beforeSend:function()
                {
                    e.preventDefault(); //Prevent default action for all instances.
                },
                success: function (data) {
                    // if data is 1, prevent default
                    if(data != 1){
                        $(this).unbind('click'); // Restores the click default behaviour if data != 1
                        return false;
                    }

                }
            });

        }, false);
    }
Comments