Cannot read properties of undefined (reading 'abort')

Question

I'm trying to write jquery function which will send ajax request, and have confirmation prompt before request. Request works correctly, but i have that error when i cancel reuest in prompt before. Here's my code

$('#AddBug').on('submit',function (e) {
        var bugNumber = $("#bugNumber").val();
        var  product = '<?php echo $_GET['product']?>';
        var  version = '<?php echo $_GET['version']?>';
              
        e.preventDefault();
        
        $.ajax({
            type: 'post',
            beforesending:checkAddBug(),
            url: 'AddBug.php',
            data: {
                bugNumber : bugNumber,
                product : product,
                version : version
            },
            success:function(data) {
                alert(data); //=== Show Success Message==
            },
            error:function(data){
                alert(data); //===Show Error Message====
            }
        });
    });

function checkAddBug(xhr){
    var bugNumber = $("#bugNumber").val();
    if(!(confirm('Are you sure to add bug ' + bugNumber + ' to database?'))){
        xhr.abort();
    }
}

What i need to change to prevent from that error in console

You are calling your function `checkAddBug` without the `xhr` parameter therefore it is undefined. — Esszed, Jan 26 '22 at 08:13

gru · Accepted Answer · 2022-01-26T09:07:00.003

First, you misspelled the function name, it's beforeSend, not beforesending.

Next, you must not call the function immediately, as you wrote:

beforesending:checkAddBug()

Instead, provide the function without paranthesis:

beforeSend: checkAddBug

Also, the function checkAddBug should simply return false, if the request should be cancelled, no need for the xhr object.

As you can see in the docs:

Returning false in the beforeSend function will cancel the request.

Edit: If you need additional logic before triggering the request

Then I would recommend you to restructure your code, like this:

$('#AddBug').on('submit', onSubmit);

function onSubmit(e) {
    var bugNumber = $("#bugNumber").val();
    var product = '<?php echo $_GET['product']?>';
    var version = '<?php echo $_GET['version']?>';
    
    e.preventDefault();
    
    if(confirm('Are you sure to add bug ' + bugNumber + ' to database?')){
        // add more checks here if required
        sendRequest(bugNumber, product, version)
    }
    
}

function sendRequest(bugNumber, product, version) {
    $.ajax({
        type: 'post',
        url: 'AddBug.php',
        data: {
            bugNumber : bugNumber,
            product : product,
            version : version
        },
        success:function(data) {
                alert(data); //=== Show Success Message==
            },
            error:function(data){
                alert(data); //===Show Error Message====
            }
        });

}

I have also quesion. How can i trigger another confirmation prompt after before send? I assign the same way function to one of variables from data, but function execute before checkAddBug, but i want to execute it after — Rafał Łątka, Jan 26 '22 at 08:49
If you want additional logic before finally sending the request, I would recommend you to move the `confirm` out of the `beforeSend` function. this way, you can do additional checks. Check out my updated answer. — gru, Jan 26 '22 at 09:07
Thanks. It works. I have last question. In `success:function(data)` i want to catch values returned in my 'AddBug.php' script. At this moment i can only catch messages from echo function — Rafał Łątka, Jan 26 '22 at 15:55

Cannot read properties of undefined (reading 'abort')

1 Answers1

Edit: If you need additional logic before triggering the request