jQuery ajaxForm returning .json file

Question

I've got a model creation form in rails which I also have returning JSON through ajax. My code so far look like:

$('#new_stem').ajaxForm({ //#new_stem is my form
  dataType: 'json',
  success: formSuccess
});

function formSuccess(stemObj) {
  //does stuff with stemObj
}

And I have a multipart form with a file uploader (but I'm not sure if that is relevant).

When I submit the form it works fine (my models are properly being created and renders as json), but instead of the json getting handled by the formSuccess function, it prompts a download for "stems.json" (the path to my stem creation action) in Firefox.

What would cause this to happen, and what could solve it? Not sure if this is part of the problem, but I don't have a submit button in my form, I have a link with a click handler that calls $('#new_stem).submit()

Thanks guys!

EDIT: Firebug tells me the header contains the following:

Etag        "b53e5247e7719cf6b1840e2c6e68781c"
Connection      Keep-Alive
Content-Type    application/json; charset=utf-8
Date        Mon, 03 May 2010 02:19:31 GMT
Server      WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime       241570
Content-Length  265
Cache-Control   private, max-age=0, must-revalidate

plus a cookie header

Solution 1

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!

Solution 2

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.

Solution 3

This plugin will allow you to submit MultiPart Forms using ajax.

If you want to use the Ajax 'success:' option you have to submit the form using ajax. Currently you are using the submit() function which basically just submits the form in the traditional way. The fact that you are able to see the json data as a downloaded file or in your browsers means that this is happening.

You need to use that plugin(if you need the multipart function - otherwise just use the regular Ajax function)

With the plugin, you would use it like this :

$("#SubmitButton").click(function() {

  $.ajaxFileUpload({
    url: serverurl,
    secureuri: false,
    fileElementId: elementId,
    dataType: 'json',
    success: function(data, status) {
      /* show success message */
    },
    error: function(data, status, e) {
      /* handle error */
    }
  });
});

If you want to do it without the file upload, there is an easier way to do it.

$("#SubmitButton").click(function() {
  $.post('YOUR_URL', $("#FormName").serialize(), function(data) {
    alert(data.name); // John
  }, "json"); //specify return data is going to be json
});

Solution 4

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.

Solution 5

Sounds like as if its Content-Type response header is incorrect and thus the browser doesn't know what to do with it. It should be application/json. You can use the Firebug's Net panel to detemine the actual response headers.

View more solutions

Comments

[Lowgain]

I took a look at the incoming headers with firebug, which contains Content-Type application/json; charset=utf-8

[BalusC]

OK, I'd update the question to include that.. It's one of the first what one would think about when a download prompt unexpectedly pops. How about Content-Disposition? No attachment?

[BalusC]

Headers looks fine. I'll do a shoot in the dark: what if you change dataType to jsonp? This is however normally only used for crossdomain JSON requests, but this changes the way how JSON is processed.

[BalusC]

As far as I know, ajaxForm already takes care about that.

[Lowgain]

it doesn't look like ajaxForm supports jsonp

[josh3736]

Ah -- I've never used ajaxForm. Perhaps fire up Fiddler to see if multiple requests are getting generated?

[Lowgain]

the ajaxForm plugin does allow for file uploads, and those run successfully. I believe it also hooks into the .submit() event, but I altered my click handler to call .ajaxSubmit() instead. Same results unfortunately!

[Lowgain]

going to give this plugin a try as well!

[Lowgain]

It doesn't look like this plugin gives me any control over the structure of my post data. As this is rails, it needs to be send over in a specific way

[DMin]

check : stackoverflow.com/questions/670320/… -- Using the $('#frmSearch').bind -- this person was able to get the same thing to work. Read the correct answer on the page. if you're using ajaxSubmit I hope you're also using the - jQuery Form Plugin(jquery.malsup.com/form) with it.

[Lowgain]

It seems to me now that the submission isn't the problem, but Firefox handles the returning .json file as if it was a download (as ajax uploads are done through iframes). I need to come up with a way to make firefox open it in the browser instead of as a download

[DMin]

file-extensions.org/… File extension JSON description: "File extension .json is used by Mozilla Firefox web browser. Used by Mozilla Firefox from version 3.0 for bookmark backup in JSON format. " using php I would generally just output a proper json formatted string from a regular php page with a .php extension and jquery takes it without any issues and processes it as json.

[BalusC]

You finally fixed it by changing to dataType to text. I find this pretty strange. How about the other browsers? Isn't this some Firefox configuration issue?