javascript error: invalid label? what does this mean?

Question

no worries! it looks like more text than it is ;-) so please go on reading!

The Main Questions are:

• What does the error: invalid label mean?
• Where is the error in my script?

now the geeky stuff begins ;-):

I have a script which loads items of an language-array (items defined via lang_keys in js - see above) from the server (server delivers a JSON version of that array), for the current language.

with JS translate("<synonym>"); function you get the required text in the current language. UPDATE: jquery 1.5 not minified (old: jquery.js (v1.4.1 - minified)) is loaded and lang.js too.

so I get an error, which I just can't find

I have to add: the translate() function works without errors and the JS is not interrupted. All functions work as desired. i don't have any other errors and all the JS works fine ... but i don't want to be surprised in the futur - so i need to get rid of that error.

console output in chrome (which is listed after the ajax request [/query/js_lang/json]):

Uncaught SyntaxError: Unexpected token :    jQuery.jQuery.extend.globalEvaljquery.js:602
jQuery.ajaxSetup.converters.text            scriptjquery.js:6992
ajaxConvert                                 jquery.js:6884
done                                        jquery.js:6454
jQuery.ajaxTransport.send.callback          jquery.js:7252
jQuery.ajaxTransport.send                   jquery.js:7261
jQuery.extend.ajax                          jquery.js:6646
(anonymous function)                        lang.js:116

console output in firefox (which is listed after the ajax request [/query/js_lang/json]):

invalid label
{"js_accept_terms":"Du musst unseren A...:"Kontaktname","js_agent_email":"Konta

Can anyone tell me exactly what the error: invalid label means?

My script (lang.js) looks like that:

var month_names = new Array();
var day_names = new Array();

var lang_keys = new Array(   
    "js_accept_terms",
    ...
    "nope"
);

var translations = new Array();


function translate(key, replace){
    var translated = translations[key];

    if(replace != undefined){
        for(var i=0; i<replace.length; i++){
            translated = translated.replace(/\%1/, replace); 
        }
    }

    return translated;
}

$.ajax({ //this is line 116
   url: "/query/js_lang/json",
   type: "post",
   data: {keys: JSON.stringify(lang_keys)},
   timeout: 7000,
   success: function(data){
       var trans = jQuery.parseJSON(data);
       for(var key in trans){
           translations[key.replace(/^js\_/, "")] = trans[key];
       }
       month_names = new Array(translate("jan"), translate("feb"), translate("mar"), translate("apr"), translate("may"), translate("jun"), translate("jul"), translate("aug"), translate("sep"), translate("oct"), translate("nov"), translate("dec"));
       day_names   = new Array(translate("sun"), translate("mon"), translate("tue"), translate("wed"), translate("thu"), translate("fri"), translate("sat"));
   },
   error: function(){
       out_message("Error. No Language loaded!", "Error");
   },
   async: false
});

out_message() displays a css-styled div. I am using that function in other parts of the website, where it works without any problems.

I removed items in lang_keys where the return value has special characters like ':', umlauts, slashes and so on ... say: I tested it with only alphanumeric values and got the same error.

sorry for my English ;-) and thanks for your help

Answer 1

Well, after some more research and some hints in StackOverflow threads i figured it out now:

The Problem is, that jQuery interpretes the ajax received data as a script (javascript) for some reason - must have something todo with eval() function, which interpretes the first json object as script because it looks like / starts like an object instance.

This occures (in my case) only if the ajax call is done before the site is loaded completely. well, with ajax calls inner some $(function() { ... }); code there are no problems so far.

the trick was to add brakets around the json string in the php script

$return_value = "(" . json_encode($translation) . ")";

and remove them after receiving in the ajax-success callback

$.ajax({    
    ...,
    success: function(data){
           data = data.substring(1,data.length-1); // for label error reason. getting json in breaktes,, which must be removed again
           var trans = jQuery.parseJSON(data);
          ...

just fyi about labels: here some information about that

Answer 2

I think the problem is with the returned JSON:

{"js_accept_terms":"Du musst unseren A...:"Kontaktname","js_agent_email":"Konta

This should look something like this:

{"js_accept_terms":"Du musst unseren A...:\"Kontaktname","js_agent_email":"Konta

There may be a problem on the server side. Your JSON encoder does not escape double quotes.