Trying to dynamically load scripts in the page using getScript()

Question

I'm building a site which has 2 requirements, the site cannot use any backend code and the site must show a different translation depending on the users country. I solved these issues by using JSON to pull all the data in and HTML5 and Javascript to figure out the Geolocation. However I seem to be falling at what I expected to be a very simple hurdle:

I am using the JQuery getScript() function to load the JSON file into the page and then echoing out the data using html(), however it is not working here is the code:

    <script type="text/javascript">
        $(function() {
            var countryName = 'england'.toLowerCase();  
            $.getScript('elements/'+countryName+'/data/datafile.js', function(data) {
                $('.welcomeOne h1').html(data.dt_welcome[0].Translation);
            });
        });
    </script>

As you can see, the path to the file has to be dynamic (otherwise I'd just use a standard tag to include the JSON file). I am not getting any errors but anything I put in the callback for getScript() is simply not being executed, I have tested the file path and I can assure you that it is correct.

BTW here is the relevant snippet of JSON (if it helps)

var dt_welcome = [
{"ID":1,"Source":"WELCOME","Characters available":null,"Current Characters":null,"Translation":"WELCOME","Notes":null},
{"ID":2,"Source":"","Characters available":230,"Current characters":210,"Translation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure","Notes":null},
{"ID":3,"Source":"<Image choices to follow>","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":4,"Source":"SEMINAR FINDER","Characters available":null,"Current characters":null,"Translation":"SEMINAR FINDER","Notes":null},
{"ID":5,"Source":"","Characters available":260,"Current characters":234,"Translation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure test test test test test test","Notes":null},
{"ID":6,"Source":"ENTER NOW","Characters available":null,"Current characters":null,"Translation":"ENTER NOW","Notes":null},
{"ID":7,"Source":"<Please put an 'x' in column F if your country stocks any of the below brands>","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":8,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"x","Notes":null},
{"ID":9,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":10,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"x","Notes":null},
{"ID":11,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"","Notes":null},
{"ID":12,"Source":"Brand name","Characters available":null,"Current characters":null,"Translation":"x","Notes":null}];

Thanks in advance.

Answer 1

If you are not going to execute any code in the javascript file I would go with getJSON instead of getScript

http://api.jquery.com/jQuery.getJSON/

Remove "var dt_welcome =" from the datafile.js and return only the literal array.

in the call to getJSON you are passing in the argument "data". Use it.

   $(function() {
        var countryName = 'england'.toLowerCase();  
        $.getJSON('elements/'+countryName+'/data/datafile.js', function(data) {
            $('.welcomeOne h1').html(data[0].Translation);
        });
    });

Answer 2

Move this

 console.log(data);
                console.log(status);
                $('.welcomeOne h1').html(data.dt_welcome[0].Translation);

to datafile.js, jQuery automatically runs what it gets from the server as javascript.

EDIT

 console.log(data);
                console.log(status);
                $('.welcomeOne h1').html(dt_welcome[0].Translation);

Answer 3

Edited after looking at the code...

It doesn't look like the js file is json format. You'll want to use:

$.getScript('/[path]/' + language + 'datafile.js', function() {

Also, your javascript has a few errors starting on line 187. Full bullet point is missing quotes.

You can troubleshoot this with Firebug (or Chrome or IE) by just including the script file like normal and looking for errors.

<script type="text/javascript" src="/[path]/england/datafile.js""></script>

Once you get those two worked out, it seems to work just fine.