Ajax GET url on error jqxhr

Question

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?
};

Yeah I tried it gives me undefined however firebug shows me the URL it attempted and was hoping to get it via jqxhr. — Dr Schizo, Sep 12 '13 at 11:41
Ensure that `myError` really is `this.myError`. Your code doesn't show it, so I'll assume that's the problem. — gustavohenke, Sep 12 '13 at 11:43
They're maybe slight issues with above code but tried to simplify it. The error handler is definately firing but the jqxhr url property is undefined? Should this be populated with the URL it attempted? — Dr Schizo, Sep 12 '13 at 13:00

Khawer Zeshan · Accepted Answer · 2013-09-12T11:51:24.787

30

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

edited Sep 12 '13 at 11:51

answered Sep 12 '13 at 11:45

Khawer Zeshan

9,470
6
40
63

Thanks, this works with playframework jsRoutes as well. – NewfrontSolutions Jan 10 '16 at 21:22
1

Just a side note: this doesn't work if you need to pass parameters in GET requests; `this.url` works (http://stackoverflow.com/a/5468718/4183498) – Dušan Maďar Apr 15 '16 at 11:18
2

*Obviously the url will be same as it was supplied in the url parameter of the ajax request* Not correct, the request could contain redirection. – Alex Apr 26 '18 at 14:41
2022 here, `var` is no longer recommended. The answer by @jcubic is actually the correct answer. I'm actually not sure why it was down-voted. Bootstrapping the `beforeSend` event to populate the `url` property on the jqXHR object before sending any request makes the property available on the jqXHR object when handling the response. – Rick Kukiela Jul 15 '22 at 18:17

neves · Answer 2 · 2022-02-09T20:21:10.180

15

I believe the simplest way would be:

this.url

The this should be bounded to the ajax settings object that has the url attribute.

edited Feb 09 '22 at 20:21

answered Sep 27 '17 at 00:02

neves

33,186
27
159
192

Interesting :D. What's the `this` in the context of the error handler? Since the function accepts a `jqXHR` object and that object doesn't have a "this" property... what could `this` possibly be? I'm finding the jQuery documentation not too helpful at this low level. – jeteon Nov 17 '17 at 22:04
The function is bound to the ajax settings object, which is what "this" is in the context of the error handler. Generally in javascript if a method is defined on an object, "this" will be set to that object when the method is executed. This is a feature of javascript, and not a feature of Jquery. It's less explicit than Python where you need to pass the object into all it's own methods. More reading: https://medium.com/quick-code/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8 – Mark Jan 22 '19 at 05:24
2

This is the best answer. Had hundreds of ajax calls sending Errors to the same Error-Handling Function, and wanted to do a quick find-and-replace to add this as a new Ajax-Url Parameter to the Error-Handling function, in order to find who the culprit was. Thank you! It works! – MikeTeeVee Dec 17 '20 at 00:32

score 1 · Answer 3 · answered Dec 25 '21 at 14:12

1

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

answered Dec 25 '21 at 14:12

jcubic

61,973
54
229
402

This is the correct answer in 2022. Do not use the accepted answer. – Rick Kukiela Jul 15 '22 at 18:19
It also works without the try/catch if you're using the built in `success` / `fail` / `error` callbacks. – Rick Kukiela Jul 15 '22 at 18:20

score 0 · Answer 4 · answered Oct 23 '18 at 13:49

0

The easiest would be to just access the url via the ajax settings (JQueryAjaxSettings) object of the error callbacks context.

$.ajax({
    type: 'get',   
    url: 'somewhere/foo',    
    error: function() {
        alert(this.url);
    }
});

answered Oct 23 '18 at 13:49

Honkalonkalooooohhh

141
7

Ajax GET url on error jqxhr

4 Answers4

Linked