jQuery ajaxForm returning .json file

Though not exactly what I was aiming to solve, I was able to come to a slightly different solution that suited my needs!

As ajax file uploads are done through iframes, the issue was that after the iframe loaded the .json file, it was interpreted by Firefox as a download and a download prompt was opened. I am pretty sure I could have played with some server settings to prevent this, but I've already sunk enough time into this.

So what I did was rendered the output as text instead of json because I was only really fishing for one id number anyway. My code now looks like:

$(document).ready(function() {
  $('#continue-upload').click(function() {
    $('#new_stem').ajaxSubmit({
      dataType: 'text', //'json',
      success: formSuccess
    });
  });
});

The id number I needed also came wrapped in pre tags, so I needed to strip those off in my results function as well.

This does what I want it to now, woo!

To prevent browser to trigger download of .json file set Content-type header to "text/html".

PHP:

header("Content-type: text/html");

ASP.NET MVC:

return Json(obj, "text/html");

In javascript you need to parse text result, like this:

$(".addform").ajaxSubmit({
            url: "file.php",
            type: "POST",
            dataType: "text",
            iframe: true,
            success: function (text) {
                var data = $.parseJSON(text);
            },
            error: function (xmlRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

Works perfectly.

Actually the ajaxSubmit code for that plugin is slightly hacky. To make ajaxSubmit work (at time of writing) your server must return JSON data as content-type=text/html. The plugin will automatically pull off the <\pre> tags etc (see source). I guess when they were trying to get the hidden iframe to pull json back they decided to treat json a text and parse it off the iframe.