Submitting a form seems to be mis-interpreting the response type

[KallDrexx]

I have a FormPanel which is used to upload a file along with several other fields. In my FormPanel I have fileUpload set to true, and I have the following submit handler:

submitHandler: function () {
        if (this.getForm().isValid()) {
            this.getForm().submit({
                url: baseUrl + '/TestRequests/AddRequest',
                //waitMsg: 'Adding Request',
                success: function (form, o) {
                    this.fireEvent(EventStrings.EditRequestSaved);
                },

                failure: function (form, o) {
                    Ext.Msg.show({
                        title: 'Add Request Failed',
                        msg: o.result.error,
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.ERROR
                    });
                }
            });
        }
    }

When I click on the save button, chrome's js console shows "Uncaught SyntaxError: Unexpected token <" in ext-all-debug.js on line 4233.

The Json the AddRequest URL returns is:

{"success":false,"msg":"Failed to add request"}

There is no other content being transferred from the server to the web browser. No matter what json gets returned though (even if a 404 occurs) the syntax error still happens.

When I step into the code, into the doDecode function and look at what is being passed into the json parameter, Chrome's console shows the parameter as being equal to:

<pre style="word-wrap: break-word; white-space: pre-wrap;">{"success":false,"msg":"Failed to add request"}</pre>

Since doDecode is trying to eval() this string I can see why the syntax error is occurring, but I don't understand why that is happening in the first place.

One thing I noticed is that the chrome console also shows this warning message:

Resource interpreted as document but transferred with MIME type application/json.

The only thing I can think of is that submitting this form is triggering something that is making the browser thing a document is being returned when it is really json that is being returned. There are 2 other AJAX calls that run before this (loading of data into 2 ext grids) and those are being correctly recognized by Ext as json, and the headers for the AddRequest response are correct, and correctly declaring the response as json as far as I can tell. The response headers are:

Cache-Control:private
Content-Length:47
Content-Type:application/json; charset=utf-8
Date:Tue, 04 Jan 2011 18:26:40 GMT
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:2.0
X-Powered-By:ASP.NET

Does anyone have any idea why this is happening?

[jay@moduscreate.com]

that's not an extjs issue, but something about the way the browser and server are communicating. Does this only happen in chrome?

[KallDrexx]

Firefox is having a similar issue with this too. Although I don't see any explicit errors (however it's error console filled with a lot of useless junk, mostly css warning messages) it does not process the json, instead Firefox gives the download prompt that says "You have chosen to open AddRequest, which is a: application/json" and gives me the "Open With" and "Save File" options, so it's obviously mis-interpreting it.

*Edit* Also even in firefox neither the Success or failure handlers are being called

[KallDrexx]

Further playing around shows that this seems to be an issue with the fileUpload: true parameter. When I comment out fileUpload: true in my FormPanel the browser is successfully sending off the request and expecting json being returned, and Chrome is correctly categorizing the returned result as XHR.

[KallDrexx]

Sorry for bumping this, but I really need to upload files via ExtJS for this project to work. For some reason Ext seems to be telling the browser to to expect a document as the form's submitted response even though json is being returned. This only happens when the formPanel's fileUpload parameter is set to true. When it is set to false, the browser correctly interprets the response as JSON and everything goes on correctly, but I do need the ability to upload a file with the rest of the form data.

[jay@moduscreate.com]

try not setting the response to application/json. All "AJAX" file uploads must use iframes, thus a traditional form submit is required. The exception to this rule is use of the XHR2 object, which most browsers don't implement.

[KallDrexx]

try not setting the response to application/json. All "AJAX" file uploads must use iframes, thus a traditional form submit is required. The exception to this rule is use of the XHR2 object, which most browsers don't implement.

Excellent thank you very much! Forcing the response type to text/html seems to fix it!

[blackdns]

sorry for the maybe dumb question, but how does one do that? (setting the response to smth different than application/json)

[skirtle]

This is something you need to do on the server, not in Ext. How you do it depends on what server you are using.

[fraber]

Thanks, that worked out for me!

Bests,
Frank