jQuery AJAX error callback not being called when there is an error

Question

I'm currently trying to implement the handling of an HTTP 413: Request entity too large error from my server. What I've done is this:

$.ajax({
    url: "submit.php",
    data: {
        "data": POSTData
    },
    success: function(response, statusText, XHR) {
        console.log(XHR.status + ": " + response);
        resolve(); // resolve the promise and continue on with execution
    },
    // Added this part:
    error: function(response, statusText, XHR) {
        if(XHR.status === 413) {
            // Request entity too large
            // To solve this we split the data we want to upload into several smaller partitions
            // and upload them sequentially

            console.log("Error 413: Request entity too large. Splitting the data into partitions...");

            // handling code below

            // blahblahblah
        }
    },
    method: "POST"
});

But instead of the error callback being fired, my console still throws an error (it says it's a 413), as if there's no handler. How do I implement this functionality?

Try to check this: http://craftcms.stackexchange.com/questions/2328/413-request-entity-too-large-error-with-uploading-a-file or this http://stackoverflow.com/questions/37489351/413-request-entity-too-large-error-during-file-upload-php — vaso123, Sep 01 '16 at 14:53
@karacsi_maci Thank you, that's definitely a good option. I'd rather handle it client-side if I can, but if it proves too difficult then I will have to resort to changing the server settings. — Bluefire, Sep 01 '16 at 14:56

score 3 · Accepted Answer · answered Sep 01 '16 at 14:56

3

You've got the method signature of the error callback wrong. See http://api.jquery.com/jquery.ajax/

The correct signature as per those docs is: Function(jqXHR jqXHR, String textStatus, String errorThrown)

Therefore in your case XHR.status doesn't exist because what you've called XHR is actually a string.

Try this:

 error: function (jqXHR, textStatus, errorThrown) {
    if(jqXHR.status === 413) {
        // Request entity too large
        // To solve this we split the data we want to upload into several smaller partitions
        // and upload them sequentially

        console.log("Error 413: Request entity too large. Splitting the data into partitions...");

        // handling code below

        // blahblahblah
    }
},

I strongly suspect that the error callback is being called, but because you've no code outside that if statement, you're not seeing anything.

answered Sep 01 '16 at 14:56

ADyson

57,178
14
51
63

Thanks! I'll try it. I just assumed that the signature of `error` was the same as that of `success`... – Bluefire Sep 01 '16 at 14:58
Brilliant! I'm still getting the error in the console, but at least now the callback is firing. Thank you! – Bluefire Sep 01 '16 at 15:01
1

what does the console error say? Most browsers report HTTP errors in the console as a matter of course, it's not really in your control. The purpose of the error callback is so your application can handle it gracefully, not to eliminate console errors. P.S. If the answer has helped don't forget to mark it as accepted :-) – ADyson Sep 01 '16 at 15:04

score 1 · Answer 2 · answered Sep 01 '16 at 15:12

You can handle this kind of error(s) using jQuery.ajaxSetup() in one place only one time.. This way you can handle more than HTTP 413.

Code:

$(function() {
    $.ajaxSetup({
        error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                console.log('Not connect.n Verify Network.');
            } else if (jqXHR.status == 404) {
                console.log('Requested page not found. [404]');
            } else if (jqXHR.status == 413) {
                console.log('Error [413]: Request entity too large. Splitting the data into partitions...');
            } else if (jqXHR.status == 500) {
                console.log('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                console.log('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                console.log('Time out error.');
            } else if (exception === 'abort') {
                console.log('Ajax request aborted.');
            } else {
                console.log('Uncaught Error.n' + jqXHR.responseText);
            }
        }
    });
});

This is a nice solution, and while it doesn't fit my current context where I want to work with some data that I have then and there, it's definitely a feature I'll note for later. — Bluefire, Sep 01 '16 at 15:14

jQuery AJAX error callback not being called when there is an error

2 Answers2