jQuery.ajax() fails to send a request to some URLs but not others

Question

In our Rails application we have an inline editing feature which PUTs changes back to the server. The URL to PUT to changes depending on which type of object is being edited / which page the user is on, but the same JavaScript supports the feature on all pages. I'm encountering an issue where jQuery's AJAX requests sometimes fail without ever touching the server, and they give no error message other than "error." I've been attempting to debug this in the console but with no success. The extremely strange part is that it seems to be due to something in the URL passed to $.ajax() which causes the issue.

In the console, this works as expected:

> errorCallback = function( jqxhr, status, err ){
    console.log( "Ajax call encountered an error: '" + status + "'" );
    console.log( jqxhr );
    console.log( err );
  };
> options = { type: 'PUT', error: errorCallback, data: { cerebro: true, name: 'cerebro-edit-span-2-title', pk: null, value: 'Test' }, url: '/staff/employees/2.json' };
> test1 = $.ajax( options );
> test1.readyState;
  4

So I can see that the AJAX request is completing normally, with no error callback fired, and a final readyState of 4 as expected. But now watch if I change only the middle portion of the URL:

> options.url = '/staff/job_advertisements/2.json';
> test2 = $.ajax( options );
  Ajax call encountered an error: 'error'
  Object {readyState: 0, getResponseHeader: function, ... } // elided for clarity

X PUT http://localhost:3000/staff/job_advertisements/2.json        jquery.js:8527
> test2.readyState;
  0

With this different URL, the AJAX call fails before it even hits the application server! A review of the logs of the development machine shows that no request is ever made to /staff/job_advertisements/2.json -- that is, the issue cannot be due to the server returning 500 or 404 or other error codes, because the server is not even receiving the request from the browser. Just to prove that the issue is client-side, not server-side (and to rule out the possibility that it has something to do with the underscore) I tried setting the URL to a few nonsense values that actually do not exist in the application:

> options.url = '/staff/jobadvertisements/2.json';
> test3 = $.ajax( options );
X PUT http://localhost:3000/staff/jobadvertisements/2.json 500 (Internal Server Error)    jquery.js:8527
  Ajax call encountered an error: 'error'
  Object {readyState: 4, getResponseHeader: function, ... } // elided for clarity

> test3.readyState;
  4
> options.url = '/staff/empl_oyees/2.json';
> test4 = $.ajax( options );
X PUT http://localhost:3000/staff/empl_oyees/2.json 500 (Internal Server Error)    jquery.js:8527
  Ajax call encountered an error: 'error'
  Object {readyState: 4, getResponseHeader: function, ... } // elided for clarity

> test4.readyState;
  4

In tests 3 and 4 I also see the request, the 500 status code, and the resulting exception in the application log, whereas no log lines were present in test 2 (the failing case). So tests 3 and 4 demonstrate that it's not an issue with the request path not existing, because when the request path doesn't exist, the error message contains the 500 status code and the readyState is still set to 4. And they also demonstrate that it's not an issue with the underscore being disallowed.

I have searched jQuery's documentation on the ajax() method and I cannot find any assistance, so... javascript / jQuery gurus, I leave this one to you: What is it about a URL that might cause a jQuery AJAX request to fail before it even is sent? And more importantly, how can I fix this?

Answer 1

Do you have AdBlock [Plus] enabled? If so, it silently blocks all requests to URLs containing advertisements. Or, it seems so, _advertisements.