7. Warning: Ajax error

When using the ajax option to load data for DataTables, a general error can be triggered if the server responds with anything other than a valid HTTP 2xx response. The error given is:

DataTables warning: table id={id} - Ajax error

where {id} is the DOM id of the table that triggered the error.

Meaning

This occurs when jQuery falls into its error callback handler (this callback built into DataTables), which will typically occur when the server responds with anything other than a 2xx HTTP status code. For example the server might respond with 404 Not Found indicating that the file requested is not available at the given URL, or 500 Internal Error which indicates that the server encountered an error while processing the request.

DataTables will fire a specific error for the case where the request from the server is a valid return (200 Ok for example), but not valid JSON - see technical note 1 for more information. This error (7) indicates a general error, as stated above.

Diagnosis

If the server didn't reply to the Ajax request with a 2xx status code, we need to know what it did reply with, so we can take corrective action. So discovering what that reply was will be the starting point for resolving the issue full.

Modern browsers all come with built in developer tools, which can be used to find out what data the server is responding to the DataTables Ajax request with. Instructions on how to do this with your browser are shown below.

Safari

1. By default Safari hides its built-in developer tools. If you don't have a Develop menu shown in Safari it needs to be enabled. If you do, jump to step 3.
   • Open the Safari menu and select Preferences...
2. Enable the developer menu in the Advanced tab
   • Click the Advanced tab in the Preferences window
   • Check the box for Show Develop menu in menu bar option
   • Close the preferences - the Develop menu will now be shown
3. View the error console
   • Select the Show Error Console option from the Develop menu.
   • The developer console will show at the bottom of the page
4. Any errors encountered on the page are shown in the developer console
   • Safari logs general Ajax errors to the developer console - in the example shown above a 404 Not Found error.
5. Additional information can also be found in the Resources tab.
   • Click the Resources tab
   • Reload the page so Safari can capture all network requests
   • Safari will show a list of all resources (images, scripts etc) which have been loaded for the page. Locate the Ajax request that has been made to the server and click it. Safari will show detailed information about the request.
   • Note that on pages with a large number of resources, Safari will group the resources by type into folders. If this happens on your site, look for the "XHRs" folder for the Ajax requests.

Please note that these instructions were written with Safari 7 as the version used. Newer versions might have slightly different steps.

Chrome

1. To access the Chrome's developer console:
   • Mac: Access the View > Developer > JavaScript Console menu option.
   • Windows: Click the Chrome menu (to the right of the address bar) and select Tools > Javascript console.
2. The Console_ is shown at the bottom of the current browser window.
   • If a general error has occurred, it will be shown here
3. More detailed information can be obtained from the network panel will show all of the requests made by Chrome to load the page.
   • Refresh the page to allow Chrome to capture all requests
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
4. Details about the Ajax request are shown.
   • Double click the Ajax requests made, including the one which is resulting in an error - a 404 error in this case.

Please note that these instructions were written with Chrome 31 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

Firefox

1. To access the developer tools in Firefox:
   • Mac: Access the Tools > Web Developer > Network menu option.
   • Windows: Click the Firefox menu (top left of the window) and select Web Developer Network option.
2. The Developer tools are shown at the bottom of the current browser window.
   • Refresh the page to allow Firefox to capture all requests
3. The network panel will show all of the requests made by Firefox to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • The red glowing button indicates an error occurred.
4. Further details about the Ajax request are shown.
   • Double click the Ajax request made by DataTables to view detailed information about the request, including error information.

Please note that these instructions were written with Firefox 26 Windows as the version used. Newer versions, or those on different platforms might have slightly different steps.

IE

1. To access the developer tools in IE:
   • Press F12 or,
   • Click the tools menu (top right, a cog icon) and select the F12 developer tools option.
2. The Developer tools are shown at the bottom of the current browser window. IE will show the document tree by default.
   • Click on the Network tab to view network requests
3. IE requires that network traffic be specifically tracked, which we want here.
   • Click the Start capturing button to capture network requests
   • Refresh the page to allow IE to capture all requests
4. The network panel will show all of the requests made by IE to load the page.
   • Find the Ajax request made by DataTables - it will likely be at or near the bottom of the request list
   • In this case IE is showing that the file requested as not found.
5. Details about the Ajax request are shown.
   • Double click the request to view detailed information about the request.

Please note that these instructions were written with IE 10 as the version used. Newer versions might have slightly different steps.

Opera

1. To access the developer tools in Opera:
   • Mac: Right click or ctrl click the document and select the Inspect element option.
   • Windows: Right click the document and select the Inspect element option.
2. The Developer tools are shown at the bottom of the current browser window. Opera will show information about the element that was clicked on.
   • Click on the Console tab to view console messages logged by Opera
3. The error console is shown, with logged errors displayed
   • In this case it is showing that the requested file cannot be found.
4. Detailed information about the Ajax request can be found in the Network tab.
   • Click the Network tab in the developer tools
   • Reload the page to ensure Opera can capture all requests for the page
   • Locate the request which is in error and double click it to view detailed information.

Please note that these instructions were written with Opera 18 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

Resolution

Once you have followed the instructions above you will know what error the server is responding with for the Ajax request.

The most common errors are:

• 404 - Not Found.
  • The URL requested was not found on the server.
  • Check for typos in the file name in the ajax parameter and in your file on the server.
• 500 - Internal Error.
  • The server encountered an error while responding to the request.
  • Check the server's error log for information as to why this error occurred.
• Origin not allowed by Access-Control-Allow-Origin.
  • A request has been made to page on a different domain from the domain which the current page has been loaded from.
  • Browsers have security measures built in to prevent loading of external scripts - for example on http://localhost you cannot Ajax load a script from http://google.com without special measures.
  • If you are using a single domain, ensure you are specifying a relative or absolute path without a domain name (i.e. don't start the URL with http(s)://).
  • Use JSONP or some other cross domain access technology such as a proxy script on your server.

If you are willing to accept the error (for example if you cannot alter the backend system to fix the error), but don't want your end users to see the alert() message, you can change DataTables' error reporting mechanism to throw a Javascript error to the browser's console, rather than alerting it. This can be done using:

$.fn.dataTable.ext.errMode = 'throw';