Why does this jQuery AJAX PUT work in Chrome but not FF

Question 1

Here's a disappointing answer. The button click was submitting the form, even though it was not bound to do that. I put onsubmit="return false;" in the form and the problem was resolved.

Question 2

I can't re produce your claim on firefox 21.0 on windows, when I go to google.com and press f12 (firebug) then run the following code:

var s = document.createElement("script");
s.src="http://code.jquery.com/jquery-1.9.1.js";
document.body.appendChild(s);
//allow some time to load and then run this
 $.ajax({
  type: "PUT",
  url: "/search",
  dataType: "json",
  data: JSON.stringify({hi:"there"}),
  success: function (data) {
    console.log(data);
  },
  error: function(e) { 
    console.log(e); 
  }
  });

I get response 405 method not allowed but more importantly; when opening up the details of the connection in the console I can see PUT, not post.

When I go to http://jqueryui.com/autocomplete/#remote and run the code (without having to include JQuery) using url:"/resources/demos/autocomplete/search.php" the xml ends successful and firebug shows PUT request.

I don't know a site where I can test if server side code detects the PUT request (google refuses POST as well so it could be a POST) but from the looks of Firebug reporting it is sending a PUT request.

[UPDATE]

I can confirm that on Firefox 21.0 the code above is 100% sure making a PUT request. Just tested it with a .net app and both Chrome 27.0.1453.94 FF set a PUT request.

Question 3

I think you might be missing something else - this jsFiddle does a PUT request on newest Chrome and Firefox 21 :

http://jsfiddle.net/QKkQg/

     var teamObject = new Object();
    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: function() { }
    });

Question 4

You are not specifying what type of content you are sending to the server. I had a similar problem where the server didn't even try to read the data from the query as it did not know what the provided format was, so it just ignored it.

When specifying a dataType to a jQuery request, you are merely telling jQuery what is the expected format that the server should reply you with. To tell the server what data format you are sending, you must provide a contentType :

$.ajax({
    type: "PUT",
    url: "/ajax/rest/team",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(teamObject)
}).done(function() {
    // Reload the team select box
    loadTeamSelectBox();

    // Pop up the site create modal
    $('#createSiteModal').foundation('reveal', 'open');

}).fail(ajaxErrorHandler);

Backbone.js has a nice RESTful API that you can use as reference.