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
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.
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====
}
});
}