title: Why does this jQuery AJAX PUT work in Chrome but not FF
body: <p>In Chrome this does an HTTP PUT just like it should, but in FireFox 21 it doesn't.  There are no errors in the javascript console or in the backend.  </p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="createTeamModal" class="small reveal-modal"&gt;
          &lt;form id="createTeamForm"&gt;
              &lt;div class="row"&gt;&lt;p id="teamFlavorText" class="lead"&gt;Building a new team&lt;/p&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-4 large-4 columns"&gt;&lt;label&gt;Team Name:&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="small-6 large-6 columns"&gt;&lt;input name="teamName" id="teamName" type="text" size="20"/&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;&lt;p class="lead"&gt;Does this team work for a business?&lt;/p&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="small-4 large-4 columns"&gt;&lt;label&gt;Business Size:&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="small-6 large-6 columns"&gt;
                      &lt;select id="businessSizeSelect" name="businessSizeSelect"&gt;
                      &lt;option value="1"&gt;Nope, I work alone&lt;/option&gt;&lt;option value="2"&gt;2 to 49&lt;/option&gt;&lt;option value="3"&gt;50 to 99&lt;/option&gt;&lt;option value="4"&gt;100 to 999&lt;/option&gt;&lt;option value="5"&gt;1,000+&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="businessLocationDiv" class="row" style="display: none; margin-top: 20px;"&gt;
                  &lt;div class="small-4 large-4 columns"&gt;&lt;label&gt;Business Location:&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="small-6 large-6 columns"&gt;
                      &lt;select id="businessLocationSelect" name="businessLocationSelect"&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="businessTypeDiv" class="row" style="display: none; margin-top: 20px;"&gt;
                  &lt;div class="small-4 large-4 columns"&gt;&lt;label&gt;Industry:&lt;/label&gt;&lt;/div&gt;
                  &lt;div class="small-6 large-6 columns"&gt;
                      &lt;select id="businessTypeSelect" name="businessTypeSelect"&gt;                      
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" style="margin-top: 20px;"&gt;
                  &lt;div class="large-offset-10 small-1 large-1 columns"&gt;
                      &lt;button id="createTeamButton" class="small button"&gt;Create&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is the jQuery:</p>
  
  <pre><code>$("#createTeamButton").click(function () {
      var teamObject = new Team();
      teamObject.description = $("#teamName").val();
      teamObject.businessSize = $("#businessSizeSelect").val();
      teamObject.businessType = $("#businessTypeSelect").val();
      teamObject.businessLocation = $("#businessLocationSelect").val();
  
      $.ajax({
          type: "PUT",
          url: "/ajax/rest/team",
          dataType: "json",
          data: JSON.stringify(teamObject),
          success: function () {
              // Reload the team select box
              loadTeamSelectBox();
  
              // Pop up the site create modal
              $('#createSiteModal').foundation('reveal', 'open');
          },
          error: ajaxErrorHandler
      });
  });
  </code></pre>
  
  <p>I have observed them in Fiddler, and the difference between working (Chrome) and not working (Firefox) is that the HTTP PUT fires in Chrome and does not fire in Firefox.  </p>
  
  <p>Now, I know that jQuery.ajax PUT is not guaranteed in all browsers.</p>
  
  <p>I have read </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/165779/are-the-put-delete-head-etc-methods-available-in-most-web-browsers">Are the PUT, DELETE, HEAD, etc methods available in most web browsers?</a></li>
  <li><a href="http://annevankesteren.nl/2007/10/http-method-support" rel="nofollow noreferrer">http://annevankesteren.nl/2007/10/http-method-support</a></li>
  </ul>
  
  <p>These sites reaffirm that PUT may not work in all browsers, but should work in FF.  </p>
  
  <p>Finally, I hit the following with FF21 and PUT works</p>
  
  <ul>
  <li><a href="http://www.mnot.net/javascript/xmlhttprequest/" rel="nofollow noreferrer">http://www.mnot.net/javascript/xmlhttprequest/</a> </li>
  </ul>
  
  <p>I could certainly engineer around this, but it seems to me this should work.  I would rather not jerry-rig something, but rather get jQuery's .ajax to work properly.  </p>
  
  <p>Other Details:
  * jQuery version 2.0.0
  * Backend is Spring3</p>
  
  <p>[ Edit to add the HTML ]</p>