*BIG* array in external files - able to split up?

How to reduce filesize of external JS file that holds an array

[designaweb]

I am using an external .js file to load a multidimentional array. This external file loads countries, cities and locations within these cities in a 3-tier selectbox.

The structure of this array looks like this:

[["COUNTRY_NAME","COUNTRY_CODE"],[["CITY_NAME","TRANSLATION_OF_CITY_NAME"], [["LOCATION_NAME", "LOCATION_CODE", ["GROUP_CODE"]]]]],

This works like a charm, because when the array is loaded, by selecting the country, you can fill the city selectbox on-the-fly. Select the city, and immidiately the location selectbox is filled with the appropriate locations.

The only problem now is, that the file is 326 KB... You can imagine that this is not the perfect "user experience", especcially on some slow ADSL or even dialup connections.

I was thinking of splitting up the datafiles. If I would make a seperate one for each country, then the individual file sizes would be acceptable in size. However, I am not sure if you are able to load a certain file only, depending on what country is selected. Here's the process of what I had in mind

- Load website including an array of countries
- Depending on what country the user selects
- Load external file that holds the cities array for that country, without refreshing/reloading the page.

Can this be done?

[Stex]

I had the problem of including an external js file dynamicaly. I was making some kind of javascript chat. Anyway, the way I got round it was to add in the <script src= tag into the html. Worked in mozilla and internet explorer at least.

var headtag = document.getElementsByTagName("A");
// headtag might be an array, I'm not sure. Here I'm assuming it's not
var getit = document.createElement("script");
getit.setAttribute("src", 'http://www.example.com/' + country + '.js');
getit.appendChild(document.createTextNode(text));
// headtag might be an array, I'm not sure. Here I'm assuming it's not
headtag.appendChild(getit); // variable might be script, I'm not sure

That's rough to say the least. Expect a lot of error while developing this. I suggest firefox/mozilla's javascript console

[kaled]

You could create a hidden IFrame and effectively refresh that (by changing its src/location) and have its javascript make the necessary changes to the <select> object. I've never tried anything like that with Iframes but it should be possible.

You should probably also consider Ajax but I believe this will require some server-side work too.

Kaled.

[Bernard Marx]

Do we need to involve XML in this, Kaled?

The "script tag" technique seems fun, and it works in IE, FF & Op (only ones tested). In IE, you can simply change the src attribute of an existing script tag, but FF doesn't take that. We need to remove & create anew.

This script could do with being generalised a lot further, but I thought I'd keep it simple.

If you have a server-script, then it wouldn't be too hard to get it to output a selection of its data (selected from a query string in the script src) to JS literal form. That way, the data wouldn't need to be separated into different files on the server.

====== HTML ===================================
<form>
  <select onchange="select_onchange(this)">
    <option>Choose label
    <option value="blue_note">Blue Note
    <option value="prestige">Prestige
    <option value="atlantic">Atlantic
  </select>
  <br>
  <select name="artist" style="visibility: hidden;">
    <option>Artists
  </select>
</form>
====== example data file (prestige.js) =================
loadScriptResponse(
  [["Charles Earland",1], ["Melvin Sparks",2], ["Idris Mohammed",3]]
);
====== main script =============================
//
/*------------------------------------------------------
  Add some brackets to array display,
  so we can see structure
------------------------------------------------------*/
Array.prototype.toString = function(){ return '['+this.join()+']';}
/*------------------------------------------------------
  Loading functions
------------------------------------------------------*/
function loadScript(id,src)
{
  var D = document;
  var head = D.getElementsByTagName('head')[0];
  var loader = createScriptTag('artistData');
  loader.src = src;
}
function loadScriptResponse(data)
{
  alert(data);
  /*-----------------------
  Now do something with it
  -----------------------*/
}
function createScriptTag(id)
{
  var script, D=document;
  var head = D.getElementsByTagName('head')[0];
  if( script = D.getElementById(id) )
    script.parentNode.removeChild( script );
  script = head.appendChild(D.createElement('script'));
  script.setAttribute('id',id);
  script.setAttribute('type','text/javascript');
  return script;
}
/*-------------------------------------------------------
 Select element
-------------------------------------------------------*/
function select_onchange(select)
{
  var val = select.options[select.selectedIndex].value;
  if(!val) return;
  loadScript('artistData', val+'.js');
}
/*-----------------------------------------------------*/

[designaweb]

I came in here to post a URL to post a link to a site I came accross while looking at the options to solve my "problem".

I am not sure if I can actually post the URL here, so I will simply stick to: search for "Javascript includes - yet another way of RPC-ing" in big ol G. and u will end up where I was planning to post the link to...