Investigate data in Success Callback, what about Errors?

rldean1

The instructions say that you cannot overwrite the success callback in the .ajax() option.... However, it says you can use either dataSrc: function(json) {...} to intercept and manipulate the returned json, or this function: "ajax": function (data, callback, settings) {...}

What about error messages returned from the server, or HTTP errors while trying to access the server? Like, if the response type is anything but 200? OR, if the SQL server returns an "access denied" message in an XML format instead of JSON? OR, the JSON is not properly formatted?

Example, my Server might return XML with an access denied message, so then I want to stop DT from loading, then display that message?

Basically, I think I'm asking: Where and how do I handle errors with AJAX when I'm specifying the .ajax() or dataSrc Options?

        ajax: {
            url: 'https://mySuperSecretAPI',
            type: 'POST',
            contentType: "application/json; charset=utf-8", //Use this content type when sending data to the server, json instead of form-data
            data: JSON.stringify(jsonRequest), //Data to be sent to the server, stringified, the actual payload
            dataType: "json",  //The type of data that you're expecting back from the server.
            dataSrc: function (json) {
                // try {
                //     JSON.parse(json.data);
                // } catch (e) {
                //     return '{"msg": "access denied do not render table"}'
                // }
                return json.data;
            }
        },

kthorngren

You can still use the Ajax error callback with the ajax option.

If the error is in the response data then maybe return an empty array ( `'[]' ) and use an alert message.

Kevin

rldean1

OK! that actually works great. And I'm using .on('xhr.dt', function (e, settings, json, xhr) to further evaluate the response.

However, is there any way that you know of to evaluate the content type that was returned from the SQL/Server response? Like, if XML was returned instead of JSON?

ADDITIONALLY, why in the examples is .on('xhr.dt', function(){...} placed BEFORE
.dataTable({ajax: "data.json"}); ?

        ajax: {
            url: 'https://superSecretAPI',
            type: 'POST',
            contentType: "application/json; charset=utf-8", //Use this content type when sending data to the server, json instead of form-data
            data: JSON.stringify(jsonRequest), //Data to be sent to the server, stringified, the actual payload
            dataType: "json",  //The type of data that you're expecting back from the server.
            dataSrc: function (json) {
                if (json.data) {
                    return json.data;
                }
                else {
                    return [];
                }
            }
        },



    }).on('xhr.dt', function (e, settings, json, xhr) {
        // consider placing this on listener above .DataTable({}) instanstiation, as is shown in the examples
        if (json.authenticated === false) {

            alert('access denied');



        }
        // Note no return - manipulate the data directly in the JSON object.

    });

kthorngren

placed BEFORE

To make sure the event handler is instantiated before Datatables initializes. This way the event handler is in place before init instead of after. In the case of using Ajax its async operation allows your xhr event to initialize before the Ajax response.

However for a DOM based table initiating the event handler second will cause that event to not fire after initialization. I put together an example to illustrate:
http://live.datatables.net/telebara/1/edit

You won't see draw event DOM 2 in the console unless you cause a draw event after initialization.

Use xhr.getResponseHeader("Content-Type") in the xhr event. I have this in the example too. See the jQuery XHR docs for more info.

Kevin