Is there a Java 'finally' analogue in jQuery AJAX calls? I have this code here. In my always I throw an exception, however I ALWAYS want it to go to the then() method.
call.xmlHttpReq = $.ajax({
url : url,
dataType : 'json',
type : 'GET'
}).always(function(processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
throw "something";
}).then(function() {
alert("i want to always run no matter what");
});
I have tried to use done(), complete(), and the another always(), but nothing seems to work.
Here is JSFiddle :
http://jsfiddle.net/qv3t3L0m/
See this example:
$.ajax({
type: "GET",
dataType: dataType,
contentType: contentType,
async: TRUE,
url: $('html form:nth-child(1)').attr('action') + "?" $('html form:nth-child(1)').serialize(),
success: function(data) {
console.log("FUNFOU!");
},
error: function(data) {
console.log("NÃO FUNFOU!");
},
complete: function(data) {
console.log("SEMPRE FUNFA!");
//A function to be called when the request finishes
// (after success and error callbacks are executed).
}
});
For more informations: http://api.jquery.com/jquery.ajax/
.always() should work. See the The jqXHR Object section at http://api.jquery.com/jQuery.ajax/.
jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });
An alternative construct to the complete callback option, the
.always() method replaces the deprecated .complete() method.
In response to a successful request, the function's arguments are the
same as those of .done(): data, textStatus, and the jqXHR object. For
failed requests the arguments are the same as those of .fail(): the
jqXHR object, textStatus, and errorThrown. Refer to deferred.always()
for implementation details.
See also http://api.jquery.com/deferred.always/
The below suggestions will not work in jQuery, because jQuery's promise implementation does not handle errors thrown in methods passed to then. I am only leaving them here as an illustration of what could be possible if jQuery was promises/A+ compliant. As Bergi rightly points out, you will have to manually wrap your code in your own try catch block.
call.xmlHttpReq = $.ajax({
url : url,
dataType : 'json',
type : 'GET'
}).then(function(processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
throw "something";
}).always(function() {
alert("i want to always run no matter what");
});
Although I'm not sure if jquery's promise supports always, an alternative would be to use then (again) and pass the same function as both successHandler and errorHandler, like this :
call.xmlHttpReq = $.ajax({
url : url,
dataType : 'json',
type : 'GET'
}).then(function(processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
throw "something";
}).then(function() {
alert("i want to always run no matter what");
},
function() {
alert("i want to always run no matter what");
});
Just a note for those who use jQuery 3.0 and later
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
As in official documentation
There is a bug ajax is dependent on the server, need to check status with "complete" is the best, a kind of "success", "error" and others are not 100% of the PUT, POST and GET ... look at an example
$.ajax({
url: '/api/v2/tickets/123456.json',
....
....
....
complete: function(data) {
if (data.statusText == "success") {
console.log("Sent successfully");
} else {
console.log("Not Sent");
}
}
});
Sorry bad english! Cheer ;-)
if you want one code definition for all ajax requests, you can do it like this
$(document).ajaxComplete(function () {
console.log('ajax complete on doc');
})
Related
$.ajax is wrapped into new 'get' function.
If there is only one 'get' invoke in js file, it is fine.
But 2 calls in row fail.
More precise,
first call fails with "Uncaught ReferenceError: process is not defined",
second one is successful, BUT in success function it has data for first 'get' invoke.
As I can guess, there is some issue with 'this'/context. Could you explain it to me?
(function() {
"use strict";
function get(url, success, error) {
$.ajax({
type: "GET",
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'process',
url: url,
success: success,
error: error
});
}
get('XXX',
function(data, textStatus, jqXHR) {
console.log("SUCCESS PING 1");
console.log(data);
},
function(jqXHR, textStatus, errorThrown) {
console.log("ERROR PIND 1");
});
get('YYY',
function(data, textStatus, jqXHR) {
console.log("SUCCESS PING 2");
console.log(data);
},
function(jqXHR, textStatus, errorThrown) {
console.log("ERROR PING 2");
});
})();
/*
===========================================
===============console=====================
===========================================
1. ERROR PIND WAR
2. Uncaught ReferenceError: process is not defined
at db?callback=process&_=1485184752755:1
3. SUCCESS PING DB
4. Object {data for first call here}
*/
First of all, It's better do NOT specify a custom callback name ('jsonpCallback' parameter)
http://api.jquery.com/jQuery.ajax/
jsonpCallback Type: String or Function() Specify the callback function
name for a JSONP request. This value will be used instead of the
random name automatically generated by jQuery. It is preferable to let
jQuery generate a unique name as it'll make it easier to manage the
requests and provide callbacks and error handling. You may want to
specify the callback when you want to enable better browser caching of
GET requests. As of jQuery 1.5, you can also use a function for this
setting, in which case the value of jsonpCallback is set to the return
value of that function.
The thing is, that jQuery creates global function in window object with specified name and later remove it.
I didn't manage to get full picture of what going on inside jQuery library, but
the issue is definitely caused by fact that it tries to call function that just has been removed.
Removing jsonpCallback param resolve an issue
I do have AJAX request and in the success callback new function to rendergooglelinks and another AJAX calls are called.
And now, I try to change the asyncronous calls to syncronous using async: false in the AJAX request.
When I do a AJAX request, rendergooglelinks are not rendered due to "undefined" error and next ajax request works.
In the syncronous ajax request, progress stops after rendergooglelinks error. Next calls are not triggered.
(i.e) Codes after that error are not processed.
Whether syncronous ajax request stops on errors ?
Whether it behaves in the way of "strict" mode ?
How can we handle this ?
// syncronous request
$.ajax({
type:"GET",
async: false,
url: url,
success: function(result, status, xhr) {
rendergooglelinks();
renderComments(); // this is not called due to error in the above
}
});
function rendergooglelinks()
{
google.test = ''; // returns error
}
function renderComments()
{
// asyncronous request
$.ajax({
type:"GET",
url: url,
success: function(result, status, xhr) {
}
}
});
Based on the code you posted, the error is that the variable google is never declared, so google.test cannot be assigned.
On the other hand, synchronous ajax calls are not a good practice, avoid them if possible.
Last but not last from jQuery.ajax() docs:
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
For the google variable, i suggest you to pass it to the function as argument, is dangerous to assume that it exist no matter what.
For other errors, try this:
$.ajax({
type:"GET",
//async: false,
url: url,
/*success: function(result, status, xhr) {
rendergooglelinks();
renderComments(); // this is not called due to error in the above
}*/
}).then([ //success callbacks
rendergooglelinks,
renderComments
],[
//no fail callbacks
]);
function rendergooglelinks(){
google.test = ''; // returns error
}
function renderComments(){
// asyncronous request
$.ajax({
type:"GET"
url: url,
/*success: function(result, status, xhr) {
}*/
}).done(function(result, status, xhr){
});
}
See also jQuery Deferred
I have the following code:
function accessControl(userId) {
return $.ajax({
url: "userwidgets",
type: "get",
dataType: 'json',
data: {
userid: userId
}
});
};
var userWidgets = accessControl('1');
$.when(userWidgets).then(function (data) {
alert(data);
});
I don't want to make the function sync by adding the parameter async: false, but the alert isn't appearing at all, is there something wrong in my code? should I use another approach?
$.ajax returns a promise. So, it don't need to be wrapped in $.when again.
Use then directly on userWidgets as it is ajax instance.
userWidgets.then(function (data) {
alert(data);
}, function(e, status, error) {
console.log(error);
// For debugging
});
From jQuery Docs
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.
I don't want to make the function sync by adding the parameter async: false, but the alert isn't appearing at all, is there something wrong in my code? should I use another approach?
Making the ajax call synchronous will not solve this problem. Your approach is fine.
As #Tushar has said in his answer you don't really need to use $.when since the $.ajaxcall returns a promise so you can chain .then callbacks onto it without using $.when. But this is not the reason why your .then callback is not being invoked.
The reason why your .then callback is not being called is because that ajax call is failing and the promise is being rejected. .then callbacks are only called when promises are resolved successfully, this fiddle verifies this statement.
You will need add failure logic to your code to handle failures in your ajax call like this:
var userWidgets = accessControl('1');
$.when(userWidgets).then(function (data) {
alert(data);
})
.fail(function(){
alert("should do something on failure");
});
I have read similar questions with similar problems but every advice I read seems to be inefficient for me. Here is the ajax call (I am using Jquery 1.9.1):
$( document ).ajaxError(function() {
alert( "AJAX ERROR" );
});
$.post( "/lists/complete", { itemID:id }, function(answer) {
alert("SUCCESS");
}, "text" ).fail( function() {
alert("ERROR");
}).always( function() {
alert("DONE");
});
On the server side the request is received as expected. If I monitor the server response on the client side (using Firebug), I can see that the server sends the 200 response along with the correct data in the body. However, no alert is never triggered !
What can I do to understand the issue ? I must add that I have very little experience with JS and with Jquery...
I'm also not a fan of jquery post. I prefer using $.ajax. However it is recommended to chain done, fail and always.
$.ajax({
url: ' yoururl ',
type: 'POST',
// dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
http://api.jquery.com/jQuery.ajax/
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and
jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare
your code for their eventual removal, use jqXHR.done(), jqXHR.fail(),
and jqXHR.always() instead.
I v never been a fan of the $.post i rather use the full ajax call :
$.ajax({
type: 'POST',
url: '/lists/complete',
data: data,
success: function(data){
alert("SUCCESS");
},
error: function(xhr, type, exception) {
// if ajax fails display error alert
alert("ajax error response type "+type);
}
});
Give this a shot and let me know if the alerts go off.
If this doesn't work out, open up the console (firebug...) and go to the network tab, clear it and send your request.
Click on the request and check the headers and response if they are normal.
I'm trying to make the AJAX call bark and squick at me so I'm executing a totally wrong URL. For some reason, none of the methods that are supposed to do the barking och squicking is invoked.
What is the reason?
$.ajax({
url: "http://totally.wrong.url",
dataType: 'jsonp',
error: function () { alert("bark 1"); },
failure: function () { alert("bark 2"); }
})
.fail(function () { alert("squick"); })
.done(function () { alert("woof"); });
Of course, if I change the URL to point to the correct WCF service, I get an approving woof.
According to jQuery API, I should use fail and done syntax but I'll be fine either way.
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
Ajax with JSONP and Cross Site Requests won't trigger the error callback.
Look at the accepted answer in this question: jQuery Ajax 404 Handling
Hopefully this should explain what you need to make it work.
I don't know if failure is supposed to work but I always use "error" and "success" instead.
So try:
$.ajax({
url: "http://totally.wrong.url",
dataType: 'jsonp',
error: function () { alert("bark");},
success: function () { alert("woof");}
}
})
$.ajax({
url: "http://totally.wrong.url",
dataType: 'jsonp',
**error**: function () { alert("bark"); }
})
.fail(function () { alert("squick"); })
.done(function () { alert("woof"); });
error is the request fail callback function and not failure