ExtJS: autoLoad does not work in IE

Question

Using ExtJS 2.2.1, I've got a container element which is supposed to load a piece of HTML from the server using:

autoLoad: { url: 'someurl' }

This works fine in Firefox, but for IE7 this results in a syntax error in ext-all-debug.js at line 7170:

 this.decode = function(json){   
   return eval("(" + json + ')');
 };

I fixed this by turning that function into this:

 this.decode = function(json){   
    return eval('(function(){ return json; })()');  
 };

Then the autoLoad works well in both browsers, but then there's some odd bugs and besides, you really don't want to fix this in the ExtJS library as it will be unmaintainable (especially in the minified ext-all.js which is like half a megabye of Javascript on a single line).

I haven't been able to find a lot about this bug.

Variations that I've tried:

// With <script> tags around all the HTML
autoLoad: { url: 'someurl', scripts: true }
// With <script> tags around all the HTML
autoLoad: { url: 'someurl', scripts: false }

And visa versa without the <script> tags. There isn't any Javascript in the HTML either, but it should be possible, because eventually we will use Javascript inside the returned HTML.

The problem isn't in the HTML because even with the simplest possible HTML, the error is the same.

UPDATE - Response to donovan:

The simplest case where this is used is this one:

changeRolesForm = new Ext.Panel({
        height: 600,
        items: [{ autoScroll: true, autoLoad: WMS.Routing.Route("GetRolesList", "User")   + '?userID=' + id}]
    });

There is no datastore involved here. The response-type is also text\html, not json, so that can't be confusing it either. And as said, it's working just fine in Firefox, and in Firefox, it also executes the same eval function, but without the error. So it's not like Firefox follows a different path of execution, it's the same, but without the error on eval.

Answer 1

If you're autoLoad'ing into a Panel or Element then a JSON decode shouldn't even be involved in the process. UpdateManager just defers to Ext.Element.update(..) which takes a string of html.

The only reason I can think that your response would be parsed as JSON is if you were using a JSONStore to request it - what are you using?

You should be able to do something simple like this:

var panel = new Ext.Panel({
  autoLoad: 'someurl'  // this is the short form, you can still use the object config
});

OR

var element = Ext.get('element id').update({
  url: 'someurl'
});

Response to Update:

That looks correct as long as something weird isn't happening with the WMS.Routing.Route(...) method. I'm actually currently working on an ExtJS application myself so I was able to quickly test some different server responses and couldn't reproduce your problem. I've also relooked at the ExtJS 2.2.1 sources and still see nothing in the related Element update and UpdateManager that would make the call to Ext.util.JSON.decode(...) that you're seeing.

I'm imagining that its from an unrelated AJAX request in another part of your application. If you're not already, I would use firebug / firebug lite to help debug this - specifically try to get a stack trace to make sure the source of your problem really is this autoLoad.

Answer 2

I don't know what the problem is, but I wanted to point out that your "fix" makes it simply return the json as a string instead of an eval'd object, so of course there is no error anymore -- you removed the functionality. It could just as simply be:

 this.decode = function(json){   
     return json;
 }

Generally speaking, random errors like this do not usually indicate a bug in Ext, especially not in functions used as commonly as Ext.decode. I would guess that either there is something in the JSON that IE does not like that other browsers ignore, or more likely, there is something unexpected going on in your app that is not obvious from your description. Have you tried inspecting your request log in Firebug to see what the JSON actually looks like? Have you tried getting the result of your Route call into a variable first to verify its contents before populating the panel? Also, try setting the "break on all errors" option in Firebug to true -- a lot of times when you get a random funtion from Ext at the top of your stack trace, the culprit is actually some application code that you weren't expecting.

Answer 3

Check your JSON. FF allow trailing commas in JSON objects while IE does not. e.g.

{foo:'bar',baz:'boz',}

would work in FF but in IE it would throw a syntax error. In order for there to not be a syntax error the JSON would need to be:

{foo:'bar',baz:'boz'}

Answer 4

I located the source of the problem and it was indeed not with ExtJS. There was a section in the application that listened to the Ext.Ajax 'requestcomplete' event and tried decoding the response.responseText to json, even if the response was HTML (which it only is in one or two cases). IE was not amused by this.

Answer 5

I had the same problem, excuse my english, i'm from Mejico, i hope I can help… my problem was triggered when I submit a Form to login, my PHP returns a JSON with the response in case of failure like this:

$respuesta = "{success: false, msgError: 'El usuario o contraseña son incorrectos'}";

but I wasn't send a resposne when it success, well when it has a true success, then the ExtJS it was trying to decode my JSON response, but there was nothing to decode, i guess that was, in my case again, the problem… I solved just sending back a response for the true succes, FF, Chrome, Safari, dont catch the problem, but Opera and IE8 does… I hope I help someone, goodbye