jquery ajax call - every other attempt fails with xhr.status = 0

Here is my code:

  $('#select').change(function() {
    $.ajax({
      url: Drupal.settings.basePath + 'custom-ajax/' + $(this).val(),
      dataType: 'html',
      success: function(response) {
        $('#container').html(response);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
      }   
    }); 
  });

The first "change" of my select returns "undefined (undefined)" in the console, second change works as expected ($('#container').html(response);). third change returns undefined, fourth change returns as expected, etc.

In every case, the full URL to the ajax callback is being hit -- if I copy and paste that URL into a new browser window, I can hit refresh 1开发者_Python百科00 times and every single time it loads successfully so I don't believe it has anything to do with the page not responding. It's worth mentioning that when the error callback runs it happens immediately after changing the dropdown -- I don't get the impression it's even attempting to call the provided URL.

---

If it's not even calling the URL as you're suggesting, it suggests that the URL isn't valid. Try seeing what this returns in a few test cases:

  $('#select').change(function() {
    var url = Drupal.settings.basePath + 'custom-ajax/' + $(this).val();
    alert(url);
    window.location = url;
  });