ExtJS decode method fails to decode """ After File Upload

Question

I have a JSON format result sent back to the client that hold the $quot sign. for some unknown reason the code breaks.

Here is the code that bricks from ext-all-debug:

doDecode = function(json){
   return eval("(" + json + ")");    FAILS HERE
},

Here is my JSON as it left the server (As far as I know , I hope the server doesn't take the time to decode this &quot on its free time.):

{
success: true,
total: 1,
results: [{
    "ID": -1,
    "Value": "POChangeRequestlblCustomerCatalogNumber",
    "Description": "",
    "Labels": {
        "1": {
            "ID": -1,
            "LanguageID": 1,
            "Value": "Catalog Number",
            "ToolTip": "",
            "LanguageName": "English",
            "KeyID": -1,
            "KeyValue": "POChangeRequestlblCustomerCatalogNumber",
            "KeyDescription": ""
        },
        "2": {
            "ID": -1,
            "LanguageID": 2,
            "Value": "&quot;", <<< THIS IS THE BAD PART!!!
            "ToolTip": "",
            "LanguageName": "Hebrew",
            "KeyID": -1,
            "KeyValue": "POChangeRequestlblCustomerCatalogNumber",
            "KeyDescription": ""
        }
    },
    "ServerComments": "1"
}]
}

this JSON is sent in a text/html content type as it is the result of a file upload operation. could that be part of the problem?

Ok, I have continued to trace down the problem and found that ExtJS does this function on the returned value from a hidden iframe:

doFormUpload : function(o, ps, url){
        ...

            try{
                doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
                if(doc){
                    if(doc.body){
                        if(/textarea/i.test((firstChild = doc.body.firstChild || {}).tagName)){ 
                            r.responseText = firstChild.value;
                        }else{
                            r.responseText = doc.body.innerHTML;  << THIS IS WHERE MY &quot; get decoded back to " (sign)
                        }
                    }

                    r.responseXML = doc.XMLDocument || doc;
                }
            }
            catch(e) {}

            ...
    }

Is there a good workaround for this issue. it seems that the browser automatically decodes the value???? any one???? this is a major issue !!

Your JSON is valid. I'd post this on the EXT forum of the Sencha.com site. This sounds like a bug. — Diodeus - James MacFarlane, Jan 24 '12 at 16:27
Can you view the response in something like Firebug to ensure that the JSON string is being returned correctly from the server? — RoccoC5, Jan 24 '12 at 18:13
FWIW: The JSON is not valid. All keys need to be quoted. Not that it matters when using `eval()`... — user123444555621, Jan 24 '12 at 18:56
this JSON is sent in a text/html content type as it is the result of a file upload operation. could that be part of the problem? — AMember, Jan 25 '12 at 06:55
I cant view the response in Firebug as it is not showing it for some reason when posing a file. — AMember, Jan 25 '12 at 06:58
I have managed to view the server response in Chrome dev tools here it is:{success:true,total:1,results:[{"ID":-1,"Value":"POChangeRequestlblCustomerCatalogNumber","Description":"","Labels":{"1":{"ID":-1,"LanguageID":1,"Value":"Catalog Number","ToolTip":"","LanguageName":"English","KeyID":-1,"KeyValue":"POChangeRequestlblCustomerCatalogNumber","KeyDescription":""},"2":{"ID":-1,"LanguageID":2,"Value":""","ToolTip":"","LanguageName":"Hebrew","KeyID":-1,"KeyValue":"POChangeRequestlblCustomerCatalogNumber","KeyDescription":""}},"ServerComments":"1"}]} look good to me. — AMember, Jan 25 '12 at 07:07
This is a very late reply, but just for the sake of completion of the answer I post this. According to Secha Doc for form [submit](http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.BasicForm), the HTML characters are decoded to their literals even before the Ext encounters the responce (As you have guessed in a comment below). Solution in my other comment — Sathish, Jan 10 '18 at 10:34
Three ways to fix it: 1) Change the content-type of responce to prevent the browser from automatically decoding the html characters 2) Replace the " with some other character sequence and replace it manually with quotes in your code or 3) In your json, for the value key, enclose the value in single quotes instead of double quotes :P — Sathish, Jan 10 '18 at 10:34

score 4 · Accepted Answer · answered Jan 25 '12 at 12:18

Here is how I worked around it.

The problem was that all browsers automatically decode the & quot; signs.

So I have fixed the Ext doFormUpload function to look like this:

  doFormUpload : function(o, ps, url){
    ...

        try{
            doc = frame.contentWindow.document || frame.contentDocument || WINDOW.frames[id].document;
            if(doc){
                if(doc.body){
                    if(doc.body.innerText){
                            r.responseText = doc.body.innerText;
                        }else{
                            r.responseText = doc.body.innerHTML.replace(/<pre>/ig,'').replace(/<\/pre>/ig,'');
                        }
                }

                r.responseXML = doc.XMLDocument || doc;
            }
        }
        catch(e) {}

        ...
}

In addition from now on the content type that the server is returning is "text/plain" this prevents the browsers from decoding the data. I also added a little workaround from FF that does not support innerText property but adds the tag that wraps the response.

This is an ugly hack to the ExJS framwork but it worked for me.

Hopefully someone will notice the question and have some better idea on how to solve it.

score 2 · Answer 2 · answered Jan 24 '12 at 18:23

2

It doesn't look like the encoded quote is causing your issue -- take a look at this jsfiddle to see that the Ext.decode function works perfectly fine when decoding a JSON string containing ":

http://jsfiddle.net/MXVvR/

Are you sure that the server is returning a JSON string and not a JSON object? Inspect the server response using Firebug, Fiddler, or Chrome Developer Tools to see exactly what's coming back from the server.

answered Jan 24 '12 at 18:23

RoccoC5

4,185
16
20

1

so, this means that what the server allegedly returns is not what I think it returns. It mean that the " is being decoded somehow before it reaches the client. – AMember Jan 25 '12 at 06:57
The server has responded perfectly, the problem was that the browser got the response from the hidden ifram body with innerHTML propery ( this is how the guys at Extjs implemented it ) and the quot; got decoded there. see my work around... – AMember Jan 25 '12 at 13:05

ExtJS decode method fails to decode """ After File Upload

2 Answers2