I have an ajax request which I am deliberately failing from my server side code to trigger the error handling event. I was wondering if it was possible here to get the URL it attempted? I want to grab that URL and inject it into a hyper link and retry the request.
Is this possible?
EDIT
I am able to see the attempted URL request being made via FireBug
and inspected the jqxhr object via console.dir()
and can't seem to find anything which helps me identify the URL it attempted to call. Ideally, don't want to store a global variable was hoping to get this from the arguments.
Thanks in advance, O.
$.ajax({
type: 'get',
url: 'somewhere/foo',
context: this,
success: this.mySuccess,
error: this.myError,
cache: false
});
myError = function (jqXhr, textStatus) {
alert(jqXhr.url); //Get url of failed request and inject it into hyper link?
};
The jqXHR (jQuery XMLHttpRequest) replaces the browser native XMLHttpRequest object. jQuery wraps the browser native XMLHttpRequest object with a superset API. The jQuery XMLHttpRequest (jqXHR) object is returned by the $. ajax() function. The jqXHR object simulates native XHR functionality where possible.
The best way to bubble that error from the server side (using php) to the client side is to send a header through the Ajax request somewhere in the 400's (which is always associated with errors). Once the Ajax request receives this it will trigger your error function.
processData. If set to false it stops jQuery processing any of the data. In other words if processData is false jQuery simply sends whatever you specify as data in an Ajax request without any attempt to modify it by encoding as a query string.
Many pages send AJAX requests to a server. Because this relies on the cooperation of the server and the network between the client and the server, you can expect these AJAX errors: Your JavaScript program receives an error response instead of data; Your program has to wait too long for the response.
Save your url
in a variable. And you can use it in the error function. Obviously the url will be same as it was supplied in the url parameter of the ajax request
var url = 'somewhere/foo';
$.ajax({
type: 'get',
url: url,
context: this,
success: this.mySuccess,
error: this.myError,
cache: false,
error: function(jqXHR, exception) {
//use url variable here
}
});
Another option can be this
$.ajax({
type: 'get',
url: 'https://google.com',
context: this,
success: this.mySuccess,
error: this.myError,
cache: false,
beforeSend: function(jqXHR, settings) {
jqXHR.url = settings.url;
},
error: function(jqXHR, exception) {
alert(jqXHR.url);
}
});
FIDDLE
I believe the simplest way would be:
this.url
The this
should be bounded to the ajax settings object that has the url attribute.
Adding to @KhawerZeshan answer. It's better to set beforeAjax globally:
$.ajaxSetup({
beforeSend: function(jqXHR, settings) {
jqXHR.url = settings.url;
}
});
This way if you use it with async await:
try {
await $.get('http://example.com');
} catch(e) {
console.log(e.url);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With