PDA

View Full Version : Submitting a form seems to be mis-interpreting the response type



KallDrexx
4 Jan 2011, 10:35 AM
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?

4 Jan 2011, 10:37 AM
that's not an extjs issue, but something about the way the browser and server are communicating. Does this only happen in chrome?

KallDrexx
4 Jan 2011, 10:45 AM
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
4 Jan 2011, 12:14 PM
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
5 Jan 2011, 7:23 AM
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.

5 Jan 2011, 7:27 AM
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
5 Jan 2011, 7:47 AM
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
3 Jun 2011, 10:33 PM
sorry for the maybe dumb question, but how does one do that? (setting the response to smth different than application/json)

skirtle
5 Jun 2011, 3:53 PM
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
6 Jun 2011, 6:10 AM
Thanks, that worked out for me!

Bests,
Frank

bee
26 Aug 2011, 1:30 AM
Hi Guys,

I am facing the same problem even if I set content type as text/html. below is my json script
begin
update image_gallary set picture = :body where image_id = :v_image_id;
:success := 'true';
end;

It throws me below error as:

Uncaught Ext.Error: You're trying to decode an invalid JSON String: <pre style="word-wrap: break-word; white-space: pre-wrap;">{"success":"true"}</pre>
?Please let me know how to resolve this. One more thing is that it store image at server place but may be return response is wrongly interpreted. But not getting clue how to solve this . I am not getting message alert of success.

skirtle
26 Aug 2011, 1:45 AM
Judging by that error message it seems that the JSON is coming back wrapped in HTML pre tags. Check the response in Firebug to confirm. If this is the case then your problem is with your server, not ExtJS.

bee
26 Aug 2011, 3:01 AM
Ok. Do we have any other work arround for this ? My data is stored in the database for that image id, but my problem is I am not getting alert box for "successfully processed". Can we do any other way to display that message as least.

skirtle
26 Aug 2011, 3:31 AM
How are you checking that the content-type of the response is text/html?

Are you seeing this problem in different browsers?

Could you post the request and response headers for the request, as seen in Firebug or Chrome?

bee
26 Aug 2011, 3:51 AM
Please find screen shot of my network So my json always go as application/json .
27708
I am not configuring my url as application/json rather in json file I am defined content type as text/html. which I can see in second line.

Please let me know what could be solution or do i need to define sepearte store for this ?
The above comes in chrome where as in firefox it askes me to save or open file. dialog box

skirtle
26 Aug 2011, 3:59 AM
I don't understand what it is you think you've done but you need to change the content-type of that response from application/json to text/html. In the screenshot it is clearly wrong. The behaviour you describe in both Chrome and Firefox is exactly what I'd expect given the content-type is wrong.

I don't know how to change the content-type on your server. Please consult with the documentation because whatever you're doing at the moment is incorrect.

mshepherd
26 Oct 2011, 1:55 PM
I had a problem with the file upload too. I noticed that if you put the keys not in quotes it in your response it fixes the issues:

{"success":true} <- does not work
{success:true} <- works, no invalid json error

Vmani
16 Mar 2012, 10:02 AM
Hi ,

I am getting "Uncaught Ext.Error: You're trying to decode an invalid JSON String: " when i try to submit the form with a file upload feature.I tried setting the response to text/html.This doesn't help.
and one more problem is that a fakepath gets add when i upload a file.How to remove this fakepath and display the full path.

I am using struts with extjs.

Please help.
Thanks,
M.Vishwadharini

george4motion
12 Dec 2014, 10:06 AM
So even though I want to parse JSON the response should be set to "text/html" instead of "application/json"? That makes little sense and though it worked for others, it doesn't for me because my JSON can contain an open angle bracket, which is valid in JSON, but which cannot be parsed when the content is text/html. Specifically the following valid JSON property:


"handlingInst":"<DO NOT SEND INVOICES.DO NOT CHARGE FREIGHT>"

Got transformed into the following invalid JSON:


"handlingInst":"<do not=" " send=" " invoices.do=" " charge=" " freight=" ">"

Substituting &lt; seems fraught with problems especially if it can be used in places where it will be displayed that way literally instead of as an angle bracket. We are already overriding JSON.parse so I will probably strip out any surrounding pre tags there, but the main point is that setting the Content-type to text/html can cause problems if the JSON contains angle brackets.

tonystark
23 Dec 2014, 2:49 AM
Judging by that error message it seems that the JSON is coming back wrapped in HTML pre tags. Check the response in Firebug to confirm. If this is the case then your problem is with your server, not ExtJS.