We Keep Coding

ajax, error is called but it work anyway

I send a post request using ajax, the data is being saved in the database but my success function never run?
If I put the success function in the error function the app is behaving as I would expect. I dont see any error messages in the node terminal. I have built the API myself, but I have noticed any problems before.
I am still on the steep learning curve, is there something wrong I have missed in my code?
$('#newPoiForm').on('submit', function(e) {
e.preventDefault();
let formData = $(this).serialize();
$.ajax({
dataType: 'json',
type: 'POST',
url: '/api/pois/',
data: formData,
success: function(message) {
console.log('success, now run the success function');
// add the new point ajax should go here
},
error: function(data) {
console.log('something went wrong');
$.ajax({
dataType: 'json',
url: 'http://localhost:3000/api/pois/last',
success: function (data) {
$(data.features).each(function (key, data) {
// add last to poi
console.log('last point added');
poi.addData(data);
});
}
});
}
});

first get rid of the nested success function within the error function and replace the error function with this to debug the cause:
error: function(ts) { alert(ts.responseText) }
Then have a look at the url, they differ within your success functions.
Either simply the first url-parameter is wrong, or the response is invalid.

Loader-GIF doesn't move when AJAX is loading

I'm trying to make a GIF-loader, which will be shown as long as my AJAX request is being processed. I'm using the jquery loader plugin.
The problem is, the GIF doesn't move when the browser is busy processing the AJAX request, though it is moving, when setting it to visible for testing purposes.
I've tested it in 3 major browsers.
This is an extract of my code. The real code is, of course, much more complex:
$("#myButton").click(function() {
$.loader({
className: "blue-with-image-2",
content: ''
});
getData();
});
function getData() {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/photos",
success: function(data) {
// do something with data
console.log(data)
$.loader('close'); // close the loader
},
error: function(jqXHR, status, error) {
console.error(status, error);
}
});
}
Here is a fiddle with that example code.
The funny thing is, when testing this particular code in jsFiddle, it does
work. But not my real code, which is almost the same, but just more complex.

Use function 'beforeSend' in ajax call
function getData() {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/photos",
beforeSend: function() {
$('#response').html("<img src='/images/loading.gif' />");
},
success: function(data) {
// do something with data
console.log(data)
$.loader('close'); // close the loader
},
error: function(jqXHR, status, error) {
console.error(status, error);
}
});

ajaxComplete not firing

I have this problem where not all of my ajaxComplete calls are getting fired.
My Code
$(document)
.ajaxStart(function () {
$.blockUI();
})
.ajaxComplete(function () {
$.unblockUI();
});
Here's the code where ajaxComplete didn't fire :
$('body').on('click', '.actTimeSheetApprove', function () {
var node = $(this).parents('tr');
$.ajax({
url: '/TimeSheet/Approve/',
type: 'POST',
context: this,
data: {
__RequestVerificationToken: fnGetToken(),
id: $(this).data('id')
},
success: function (data) {
if (data == 'success') {
var table = $('#tblTimeSheetApprove').DataTable();
table.row(node).remove().draw();
console.log('SUCCESS'); //I already made sure this is called
}
}
})
})
Note that I already make sure SUCCESS log is called.
Any idea why?
UPDATE :
Here's my controller
[HttpPost]
[ValidateAntiForgeryToken]
[ClaimAuthorize("Role", "Manager")]
public ActionResult Approve(int id)
{
_uow.TimeSheet.Approve(id, User.Identity.Name);
_uow.Save();
return Content("success");
}
And here's my console log :

I guess that you have incorrect the "syntax" in the $.ajax call, you miss the complete...
success !== complete
https://api.jquery.com/Ajax_Events/
With ajaxStart you can use load or ajaxSetup for make the request and define the behaviour of the success/error methods;
Also for debug, try to ajaxStop() and see if everything works well.

Check the done, fail and always callbacks below.
$.ajax({
url: 'Your Url',
data: JSON.stringify(Parameter list),
type: 'POST',
contentType: 'application/json, charset=utf-8',
dataType: 'json',
beforeSend: function (xhr, opts) {
}
}).done(function (data) {
debugger;
}).fail(function (data) {
debugger;
}).always(function(data) {
alert("complete");
});
.ajax().always(function(a, textStatus, b){});
Replaces method .complete() which was deprecated in jQuery 1.8. In response to successful transaction, arguments are same as .done() (ie. a = data, b = jqXHR) and for failed transactions the arguments are same as .fail() (ie. a = jqXHR, b = errorThrown). This is an alternative construct for the complete callback function above. Refer to deferred.always() for implementation details.
please check this link : firing in Ajax call

Error handling for Remote Autocomplete is not working

I have this jquery autocomplete code.Everything works fine data is loaded etc.Success is working.But when i have error...error handling is not working in below code.
$("#autocomplete").on("filterablebeforefilter", function (e, data) {
if (value && value.length > 0) {
//$ul.listview("refresh");
$('.ui-responsive-panel').enhanceWithin();
$.ajax({
type: "GET",
url: "http://domain.com/food.php",
dataType: "jsonp",
crossDomain: true,
data: $(this).serialize(),
success: function (data) {
alert("success");
},
error: function () {
alert("an error occurred!");
},
beforeSend: function () {
// This callback function will trigger before data is sent
},
complete: function () {
setTimeout(function () {}, 1);
}
})
.then(function (response) {
$.each(response, function (i, val) {
//do something with data
});
}
});

As the jQuery doc states for jQuery.ajax error handler functions:
Note: This handler is not called for cross-domain script and cross-domain JSONP requests.
It is related to the technique of JSONP where the actual request is injected as a <script> tag. So a standard jqXHR object including an ajax error event isn't available. There's some plugin as workaround available. This plugin and solutions for dealing with network timeouts are discussed e.g. in this and this stackoverflow questions.

Try handling the error in the then (or use done() and fail() )
$.ajax({
//... code omitted ...
})
.then(
function (response) {
$.each(response, function (i, val) {
//do something with data
});
},
function (error) {
//do something with error
}
});

How to initiate a function when $ajax() is called?

In jquery that is.
I would like something that works as the success-pararameter, but that is run when the function is called, rather than once I get the response.
sample (oajax is an extension of ajax for open auth)
$.oajax({
url: url,
jso_provider: "facebook", // Will match the config identifier
jso_scopes: false, // List of scopes (OPTIONAL)
dataType: 'json',
success: function(data) {
fbposts=data.data
//a bunch of code irellevant for the question
},//success done
error: function() {
console.log("ERROR Custom callback()");
}
})
};

Are you looking for .ajaxSend() ?
Attach a function to be executed before an Ajax request is sent.
This function (and .ajaxComplete et al) allow you to register callback functions that are called for the different phases of every AJAX request.

In a normal ajax function, you pass it as beforeSend:
$.ajax({
url: url,
dataType: 'json',
beforeSend: function(jqXHR, status){
// CODE HERE
},
success: function(data) {
fbposts=data.data
},
error: function() {
console.log("ERROR Custom callback()");
}
})
};
You'll have to check if oajax have this event too, but it probably do