Problem with jQuery.ajax with 'delete' method in ie

Question

I have a page where the user can edit various content using buttons and selects that trigger ajax calls. In particular, one action causes a url to be called remotely, with some data and a 'put' request, which (as i'm using a restful rails backend) triggers my update action. I also have a delete button which calls the same url but with a 'delete' request. The 'update' ajax call works in all browsers but the 'delete' one doesn't work in IE. I've got a vague memory of encountering something like this before...can anyone shed any light? here's my ajax calls:

//update action - works in all browsers
jQuery.ajax({
  async:true, 
  data:data, 
  dataType:'script', 
  type:'put', 
  url:"/quizzes/"+quizId+"/quiz_questions/"+quizQuestionId,
  success: function(msg){ 
    initializeQuizQuestions();
    setPublishButtonStatus();
  }
});  



//delete action - fails in ie
  function deleteQuizQuestion(quizQuestionId, quizId){
    //send ajax call to back end to change the difficulty of the quiz question
    //back end will then refresh the relevant parts of the page (progress bars, flashes, quiz status)
    jQuery.ajax({
      async:true, 
      dataType:'script', 
      type:'delete', 
      url:"/quizzes/"+quizId+"/quiz_questions/"+quizQuestionId,
      success: function(msg){ 
        alert("success");
        initializeQuizQuestions();
        setSelectStatus(quizQuestionId, true);
        jQuery("tr[id*='quiz_question_"+quizQuestionId+"']").removeClass('selected');        
      },
      error: function(msg){
        alert("error:" + msg);
      }
    });     
  }

I put the alerts in success and error in the delete ajax just to see what happens, and the 'error' part of the ajax call is triggered, but WITH NO CALL BEING MADE TO THE BACK END (i know this by watching my back end server logs). So, it fails before it even makes the call. I can't work out why - the 'msg' i get back from the error block is blank.

Any ideas anyone? Is this a known problem? I've tested it in ie6 and ie8 and it doesn't work in either.

thanks - max

EDIT - the solution - thanks to Nick Craver for pointing me in the right direction.

Rails (and maybe other frameworks?) has a subterfuge for the unsupported put and delete requests: a post request with the parameter "_method" (note the underscore) set to 'put' or 'delete' will be treated as if the actual request type was that string. So, in my case, i made this change - note the 'data' option':

   jQuery.ajax({
      async:true, 
      data: {"_method":"delete"},
      dataType:'script', 
      type:'post', 
      url:"/quizzes/"+quizId+"/quiz_questions/"+quizQuestionId,
      success: function(msg){ 
        alert("success");
        initializeQuizQuestions();
        setSelectStatus(quizQuestionId, true);
        jQuery("tr[id*='quiz_question_"+quizQuestionId+"']").removeClass('selected');        
      },
      error: function(msg){
        alert("error:" + msg);
      }
    });     
  }

Rails will now treat this as if it were a delete request, preserving the REST system. The reason my PUT example worked was just because in this particular case IE was happy to send a PUT request, but it officially does not support them so it's best to do this for PUT requests as well as DELETE requests.

Answer 1

IE 7 and 8 do not support DELETE and PUT methods. I had a problem where IE7,8 would not follow a 302 redirect and IE would use the DELETE or PUT method for the location that it was supposed to redirect to (with a get.)

To ensure that IE7 and 8 work properly, I would use a POST with the parameters:

data: {'_method': 'delete'}

Answer 2

Take a look at your type attribute type:'delete'

jQuery documentation on type:

The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

I would instead try and include this with your data and look for it on the server-side, like this:

data: {'action': 'delete'},