Submitting a form to a Rails server from jQuery using AJAX isn't working in IE11

Question

I'm trying to upload some data from a from to a Rails server using AJAX. The form contains two text inputs and one file input. Here's what my submit event handler looks like:

$("form").on("submit", function(event) {

  event.preventDefault();

  $.ajax({
    url: $(this).attr("action"),
    type: $(this).attr("method"),
    data: new FormData(this),
    contentType: false,
    processData: false
  });
});

This works fine in every browser except IE. When I try to submit the form in IE, my Rails server spits out the following error:

Unexpected error while processing request: bad content body
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:117:in `get_current_head_and_filename_and_content_type_and_name_and_body'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:19:in `block in parse'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:17:in `loop'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:17:in `parse'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/multipart.rb:25:in `parse_multipart'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/request.rb:377:in `parse_multipart'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/request.rb:203:in `POST'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:26:in `method_override'
        /Users/landonschropp/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:14:in `call'
        ...

I'd appreciate any insights into why this might not be working.

Answer 1

This might be a bug with IE10/11's serializing of form data. According to a blog post, those versions of IE corrupt the request when the last checkable input is not checked.

[1] http://blog.yorkxin.org/posts/2014/02/06/ajax-with-formdata-is-broken-on-ie10-ie11

Answer 2

Is there a <script> tag in the new content? If so, try it without that bit. I've seen some versions of ie have troube with js updates containing that tag...