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

Posted by Max Williams on Stack Overflow See other posts from Stack Overflow or by Max Williams
Published on 2010-03-16T17:55:01Z Indexed on 2010/05/09 13:08 UTC
Read the original article Hit count: 344

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX