javascript - jQuery .getJSON Firefox 3 Syntax Error Undefined

Question

I'm getting a syntax error (undefined line 1 test.js) in Firefox 3 when I run this code. The alert works properly (it displays 'work') but I have no idea why I am receiving the syntax error.

jQuery code:

$.getJSON("json/test.js", function(data) {
    alert(data[0].test);
});

test.js:

[{"test": "work"}]

Any ideas? I'm working on this for a larger .js file but I've narrowed it down to this code. What's crazy is if I replace the local file with a remote path there is no syntax error (here's an example):

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Answer 1

I found a solution to kick that error

$.ajaxSetup({'beforeSend': function(xhr){
    if (xhr.overrideMimeType)
        xhr.overrideMimeType("text/plain");
    }
});

Now the explanation: In firefox 3 (and I asume only firefox THREE) every file that has the mime-type of "text/xml" is parsed and syntax-checked. If you start your JSON with an "[" it will raise an Syntax Error, if it starts with "{" it's an "Malformed Error" (my translation for "nicht wohlgeformt"). If I access my json-file from an local script - no server is included in this progress - I have to override the mime-type... Maybe you set your MIME-Type for that very file wrong...

How ever, adding this little piece of code will save you from an error-message

Edit: In jquery 1.5.1 or higher, you can use the mimeType option to achieve the same effect. To set it as a default for all requests, use

$.ajaxSetup({ mimeType: "text/plain" });

You can also use it with $.ajax directly, i.e., your calls translates to

$.ajax({
    url: "json/test.js",
    dataType: "json",
    mimeType: "textPlain",
    success: function(data){
        alert(data[0].test);
    } });