jquery ajax response error not working

Question

I have an Ajax Call to an API which will return correctly (200) when the URL and the parameters are fine. Now I am trying to force an error with a bad request. Console will inform me about error code 400 but never seems to get into the error method. Instead it gets stuck in some jquery line and never returns.

 fetch: function(successCallback, errorCallback) {
        var apiUrl = this.applyFilter(filters);
        var self = this;

        this.log('fetch', apiUrl, currentSearchMode);

        $.ajax({
            url: apiUrl,
            type: 'GET',
            cache: (debug) ? true: false,
            processData: true,
            crossDomain: true,
            scriptCharset: 'UTF-8',
            jsonp: 'callback',
            dataType: 'jsonp',
            success: function(data, statusText, jqXHR) {
                console.log(jqXHR);
                // if(jqXHR.status == 400){
                //     console.log('there is an error');
                // }
                self.log('fetch::success', data);
                if (typeof data.error !== 'undefined') {
                    showNoResultError = true;
                    var appData = lastValidResult[currentSearchMode];
                } else {
                    showNoResultError = false;
                    var appData = self.normalize[currentSearchMode](self, data);
                    lastValidResult[currentSearchMode] = appData;
                }
                if (typeof successCallback === 'function')
                    successCallback(appData);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //do sth here

                // if(jqXHR.status&&jqXHR.status==400){
                //     alert(jqXHR.responseText);
                // }else{
                //     alert("Something went wrong");
                // }
                // console.log('works now');
                // self.log('fetch::error', textStatus, errorThrown);
                // if (typeof errorCallback === 'function')
                //     errorCallback.apply(this, arguments);
            },
            complete: function(jqXHR, textStatus) {
                console.log(jqXHR);
                console.log('complete');
            }
        });
    },

So the image shows where it gets stuck. I can only catch complete and success functions but when there a 400 response there is nothing happening. Tried anything, also done(), fail() since I assumed there might be a problem with deprecated behavior. But same problem there. Can anybody help, please?

Your server should support the type of request which is being sent. — kvn, Jul 25 '17 at 16:50
The URL is valid but intentionally called using wrong parameters to provoke a 400 status code which is returned but will not be handled by my error code. — sequoia, Jul 26 '17 at 09:39

score 0 · Answer 1 · answered Jul 25 '17 at 16:51

Try:

fetch: function(successCallback, errorCallback) {
        var apiUrl = this.applyFilter(filters);
        var self = this;

        this.log('fetch', apiUrl, currentSearchMode);

        $.ajax({
            url: apiUrl,
            type: 'GET',
            cache: (debug) ? true: false,
            processData: true,
            crossDomain: true,
            scriptCharset: 'UTF-8',
            jsonp: 'callback',
            dataType: 'jsonp',
            success: function(data, statusText, jqXHR) {
                console.log(jqXHR);
                // if(jqXHR.status == 400){
                //     console.log('there is an error');
                // }
                self.log('fetch::success', data);
                if (typeof data.error !== 'undefined') {
                    showNoResultError = true;
                    var appData = lastValidResult[currentSearchMode];
                } else {
                    showNoResultError = false;
                    var appData = self.normalize[currentSearchMode](self, data);
                    lastValidResult[currentSearchMode] = appData;
                }
                if (typeof successCallback === 'function')
                    successCallback(appData);
            },
            error: function(data){
                console.log(data);
                console.log(data.responseText);
            },
            complete: function(jqXHR, textStatus) {
                console.log(jqXHR);
                console.log('complete');
            }
        });
    },

then, show me what's in your console

Thx. I tried your code but got the same result as before. The hint from @karthick seems to be reason for this behavior. — sequoia, Jul 26 '17 at 09:32

score 0 · Answer 2 · answered Jul 25 '17 at 16:59

0

Error callback will not be fired for crossdomain requests or for jsonp requests.

search for the below in the reference link.

Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

Reference: http://api.jquery.com/jquery.ajax/

You can look at this answer for how to handle errors for jsonp requests

JSONP request error handling

answered Jul 25 '17 at 16:59

karthick

11,998
6
56
88

Thanks for the answer. This seems to be the problem. – sequoia Jul 26 '17 at 09:39

jquery ajax response error not working

2 Answers2