Multipart Form POST Causes Firefox To Prompt JSON Save

Question

I have a problem that happens in IE 8 and Firefox 6.0 but not Chrome 17.0.9. When I post frmMain below I'm sending it to a test page that just returns a simple JSON string with ContentType: application/json; charset=utf-8. The problem is that IE and FF will prompt me to save the JSON that is returned from the server and not hit the success method in my jquery code. But strangely, if I omit the <input name='File_1' type='file' /> on the posted form then IE and FF do not prompt me to save my JSON and my jquery success code fires.

So it seems that the posted content has a bearing (in IE and FF) on how the browser reacts to the returned payload. Through Fiddler I've verified that in each case the returned payload is exactly the same.

Any ideas?

SOLUTION FOUND: See my answer below. From what I can gather "text/html" is the best cross-browser content type to return when doing jquery/ajax/json.

CODE

<script>
     $(function () {
         $('#btnSave').click(function () {
             $('#frmMain').ajaxSubmit({
                 success: function (data, statusText, xhr, $form) {
                     alert('test success');
                 },
                 fail: function (data, statusText, xhr, $form) {
                     alert('test fail');
                 }
             });
         });
     });
</script>
<body>
     <form id='frmMain' action='/test' method='post'>
              <!--Omit the file input below to make it work-->
          file: <input name='File_1' type='file' /><br />

          name: <input name='json' value='{"id":5}' /><br />

          <input type='button' id='btnSave' value='Save' />
     </form>
</body>

CALLED WITH THE FILE UPLOAD (CAUSES FAIL): enter image description here

CALLED WITHOUT THE FILE UPLOAD (WORKS): enter image description here

WHAT FAIL LOOKS LIKE IN IE: enter image description here

WHAT FAIL LOOKS LIKE IN FF: enter image description here

Have you tried adding `enctype="multipart/form-data"` to the `
` when posting with the `file` field? It shouldn't make a difference to the outcome in theory, but worth trying all possibilities. — Rory McCrossan, Apr 06 '12 at 15:05
Thanks @Rory, that didn't seem to help but good idea. The plugin I'm using was already adding that on the HTTP post (see Fiddler). — sisdog, Apr 07 '12 at 04:42

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

After a TON of trial and error I ran across this SO post where @ItsJason recommended setting the server's ContentType to "text/html". That solved the problem and my jQuery code still recognized the returned payload as JSON when it called my callback method. so lesson learned: for total cross-browser compatibility when returning JSON to jquery during an ajax postback, don't use "application/json", use "text/html"!!

edited May 23 '17 at 12:30

Community

1
1

answered Apr 07 '12 at 04:47

sisdog

2,649
2
29
49

For IE, I get `

` tags, so I had to manually remove them before parsing into JSON. Just FYI for those who are facing this issue.

– George Apr 25 '14 at 08:03

score 0 · Answer 2 · answered Apr 06 '12 at 15:21

0

You may need to specify that the return type of the data is json.

It looks like you are using a plugin. Anyway, there is some info on specifying return data type here: http://jquery.malsup.com/form/#options-object

answered Apr 06 '12 at 15:21

Ryan

288
3
11

Multipart Form POST Causes Firefox To Prompt JSON Save

2 Answers2