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

Nealson

Have you actually tried it? – Adelia

Yeah I tried it gives me undefined however firebug shows me the URL it attempted and was hoping to get it via jqxhr. – Nealson

Ensure that myError really is this.myError. Your code doesn't show it, so I'll assume that's the problem. – Adelia

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? – Nealson

Answer 1

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

Javelin

Thanks, this works with playframework jsRoutes as well. – Tonguelash

Just a side note: this doesn't work if you need to pass parameters in GET requests; this.url works (https://mcmap.net/q/335587/-access-the-url-of-an-jquery-ajax-request-in-the-callback-function) – Curr

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. – Chester

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. – Slack

Answer 2

I believe the simplest way would be:

this.url

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

Aramen

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. – Caloyer

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: medium.com/quick-code/… – Palmetto

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! – Mercier

Answer 3

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

Gebelein

This is the correct answer in 2022. Do not use the accepted answer. – Slack

It also works without the try/catch if you're using the built in success / fail / error callbacks. – Slack

Answer 4

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

Jayme