title: jQuery .ajax() request not firing
body: <p>I'm trying to make an AJAX call to my web server to pull down information about a city.</p>
  
  <ul>
  <li>I have a select drop down on the page, populated with 3 values: [<em>blank</em>], "New York, NY", and "Ann Arbor, MI"</li>
  <li>When an item is selected, the city's name is reformatted: spaces are turned into '-'</li>
  <li>Then <code>.ajax()</code> is fired to "/data/[<em>city</em>]"</li>
  <li>When the server responds, it calls <code>alert()</code> with a JSON object it retrieved.</li>
  </ul>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>$( document ).ready(function() {
    $('#city').change(function () {
      var city = $.trim($(this).val()).replace(/ /g,"-");
      if(city.length &gt; 0)
      {
        var url = "/data/cities/" + city;
        $.ajax({
          url: url,
          context: document.body,
          dataType: 'json'
        }).done(function(data) {
          alert(data);
        });
      }
    });
  });
  </code></pre>
  
  <p>For some reason, the <code>.ajax()</code> call refuses to fire on occasion. The outgoing HTTP request is never made when <code>url</code> equals:</p>
  
  <ul>
  <li><code>/data/cities/New-York,-NY</code></li>
  </ul>
  
  <p>However, it fires successfully when <code>url</code> equals:</p>
  
  <ul>
  <li><code>/data/cities/New-York-NY</code> (no comma)</li>
  <li><code>/data/cities/New-York,NY</code> (no dash)</li>
  <li><code>/data/cities/New-York,-NYC</code> (additional character)</li>
  <li><code>/data/cities/Ann-Arbor,-MI</code> (similar format)</li>
  </ul>
  
  <p>I have verified:</p>
  
  <ul>
  <li>The browser makes no outgoing HTTP request when it 'fails' (as checked via Chromium's Network tab)</li>
  <li>The web server receives the HTTP requests for all the URLs except this problematic one</li>
  <li>There are no Javascript errors on the page</li>
  </ul>
  
  <p>Am I missing something obvious? This seems <em>really</em> weird that <code>.ajax()</code> wouldn't fire for this one specific URL...</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Added an error callback to the <code>.ajax()</code> request. It is failing with an error of state = "rejected" and statusText = "error".</p>
  
  <p>As requested, the <code>&lt;select&gt;</code> tag on the page:</p>
  
  <pre><code>&lt;select id="city"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;option value="New York, NY"&gt;New York, NY&lt;/option&gt;
    &lt;option value="Ann Arbor, MI"&gt;Ann Arbor, MI&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>