Question

im trying to load a external js (json) file (PhoneGap app) whose structure is like

   var localString ={
  "tag1": "Username",
  "tag2": "Password",
  "submit": "Submit"
   }

and using the below code to load it at runtime, the newlocale variable holds the name of the file to be loaded for eg: if locale is english-USA then var resourcePath = en-US.js. The issue is the first time i run this code i get this error “ReferenceError: localstring is not defined” , but it loads the external strings the second time i load it. In between i am calling the external file using “select” tag in html5. Can someone provide some insights on where im going wrong or any pointers to overcome this issue.

var newlocale = window.DeviceCulture.get();
local(newlocale);

function local(lang) {
try {
    var resourcePath = lang + '.js';
    var scriptEl = document.createElement('script');
    scriptEl.type = 'text/javascript';
    scriptEl.src = resourcePath;
    alert(resourcePath);
    document.getElementsByTagName("head")[0].appendChild(scriptEl);
    //$('head').append(scriptEl);

    //var localString = window.localString;
    document.getElementById("07").value = localString['submit'];
 } catch (e) {
    errorEvent(e);
}
}

Answer 1

Okay I believe the root cause of your problem is that you are appending the tag for the .js file into the head after the page is already loaded. When you first load a page the script tages are downloaded and interpreted in order so b can depend on a. However, the way you are doing it is non-blocking so that the script you load is not fully loaded by the time you get to the next line in your code which tries to access “localString”.

To solve this I’d restructure your code somewhat. First forget about making local files JavaScript. Just make them plain text .json files. For example:

{
    "tag1": "Username",
    "tag2": "Password",
    "submit": "Submit"
}

Then I’d load that file using XHR instead of script tag insertion. Something like:

var newlocale = window.DeviceCulture.get();
var localString;
local(newlocale);

function local(lang) {
    try {
        var resourcePath = lang + '.json';
        var request = new XMLHttpRequest();
        request.open("GET", resourcePath, true);
        request.onreadystatechange = function(){
            if (request.readyState == 4) {
                if (request.status == 200 || request.status == 0) {
                    localString = JSON.parse(request.responseText);
                    // at this point localString is loaded with the new language
                    document.getElementById("07").value = localString['submit'];
                }
            }
        }
        request.send();
     } catch (e) {
        errorEvent(e);
    }
}

and that should take care of things.