Localization script loading breaks in IE7/8

[GoogleCodeExporter]

What steps will reproduce the problem?
1.  Host all timeline and SimileAjax files local to server.  This effects at 
least version 2.3.1 and "pre 2.4.0"
2.  Create page to create timeline.  Api script can specify bundle is true or 
false, it does not matter which.
3.  Load the page in IE7 or 8.

What is the expected output? What do you see instead?
Expected: Timeline loades without error and shows timeline events.
Observed: Either one of these two js errors causing preventing the page from 
rendering:
  1. Timeline.GregorianDateLabeller.monthNames[]... is null or not an object
  2. Timeline.string[]... is null or not an object

Please provide any additional information below.

Note that the steps above always work correctly for Firefox.  

I think that the technique used to dynamically load localized files from 
timeline-api.js is flawed given that browsers are free to implement how they 
load html elements asynchronously and do not guarentee the order loaded.  In 
IE, this manifests itself in that the timeline-bundle.js is not loaded 
completely before the ./scripts/l10n/en/labellers.js and timeline.js files load 
and execute.  These two files attempt to add entries to a hashmap that has not 
been created yet, hence the js errors.

Our workaround is to use bundle=false and hardcode the "en" localized code into 
timeline-api.js and ./scripts/labellers.js files and then disable the localized 
code loading in timeline-api.js.

Original issue reported on code.google.com by codebene...@gmail.com on 2 Feb 2011 at 5:18

[GoogleCodeExporter]

patch in issue 425 could solve the problem: MSIE, Safari, Chrome... executes 
dinamically added head script elements as soon as they are served with 
concurrent requests; Firefox, Opera... behaves synchronously

Original comment by fabio.gi...@gmail.com on 2 Feb 2011 at 10:59

[GoogleCodeExporter]

this patch is needed too (can't edit source)

Original comment by fabio.gi...@gmail.com on 2 Feb 2011 at 11:54

Attachments:

• timeline-api.js

[GoogleCodeExporter]

Hi,

I'm using Simile timeline in my sharepoint site, timeline is working fine in 
IE7 but in IE8 im getting Javascript error as 
"Timeline.GregorianDateLabeller.monthNames[]... is null or not an object" AND 
"object Expected".
I have attached my code below,
<script language="javascript" type="text/javascript">
var Timeline_urlPrefix = "http://simile.mit.edu/timeline/api/";
includeJSScript("http://simile.mit.edu/timeline/api/timeline-api.js?bundle=true"
);
includeJSScript("http://MYSITE NAME/Shared%20Documents/spapi_core.js");
includeJSScript("http://MYSITE NAME/Shared%20Documents/spapi_types.js");
includeJSScript("http://MYSITE NAME/Shared%20Documents/spapi_lists.js");
includeJSScript("http://MYSITE NAME/Shared%20Documents/date.js");
function includeJSScript(p_file) {
// before we insert this script, we need to check if it already exists
var bAlreadyExists = false;
var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].src == p_file) {
//scripts[i] is the one
bAlreadyExists = true;
break;}}
if (!bAlreadyExists) {
var v_script = document.createElement('script');
v_script.type = 'text/javascript';
v_script.src = p_file;
document.getElementsByTagName('head')[0].appendChild(v_script);}}
function openXMLfile(url)
{
    if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("", "", null);
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            } catch (e) {
            alert("Permission UniversalBrowserRead denied.");
            }
        xmlDoc.async=false;
        xmlDoc.load(url);
        return(xmlDoc);
    }
    else if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.load(url);
        return(xmlDoc);
    }
    else
    {
        alert('Your browser can\'t handle this script');
        return;
    }

}

function formatDateString(strDate) 
{ 
var yearStr = strDate.substr(0, 4); 
var monthStr = strDate.substr(5, 2); 
var dayStr = strDate.substr(8, 2);        
return monthStr + "/" + dayStr + "/" + yearStr + " " + strDate.substr(11); 
} 

function takeEventOut(url)
{
    var rows;
        var eventSource = new Timeline.DefaultEventSource();
    xmlDoc = openXMLfile(url);
            if (document.implementation && document.implementation.createDocument)
    {
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            } catch (e) {
            alert("Permission UniversalBrowserRead denied.");
            }
        rows = xmlDoc.getElementsByTagName("z:row");
    }
    else if (window.ActiveXObject)
    {
        rows = xmlDoc.getElementsByTagName("z:row");
    }
    else
    {
        alert('Your browser can\'t handle this script');
        return;
    }
    for (j=0;j<rows.length;j++)
    {

var ows_EventDate = formatDateString(rows.item(j).getAttribute("ows_stdate")); 
var dateEvent1 = new Date(ows_EventDate); 
var title = rows.item(j).getAttribute('ows_Title');
var desc = rows.item(j).getAttribute('ows_desc');
var evt = new Timeline.DefaultEventSource.Event
(dateEvent1, dateEvent1, dateEvent1, dateEvent1, true, title, desc, 0, 0);    

eventSource.add(evt);
}   
var theme = Timeline.ClassicTheme.create(); // create the theme    
theme.event.bubble.width = 300;   // modify this bubble size to fit your needs  

theme.event.bubble.height = 170; 
var bandInfos = [ 
Timeline.createBandInfo({ 
trackGap:       0.5, 
width:          "80%", 
intervalUnit:   Timeline.DateTime.MONTH, 
intervalPixels: 100, 
eventSource: eventSource 
}), 
Timeline.createBandInfo({ 
showEventText:  false, 
trackHeight:    0.5, 
trackGap:       0.2, 
width:          "20%", 
intervalUnit:   Timeline.DateTime.YEAR, 
intervalPixels: 200, 
eventSource: eventSource 
}) 
];
bandInfos[1].syncWith = 0; 
bandInfos[1].highlight = true; 
var timeLine = Timeline.create(document.getElementById("my-timeline"), 
bandInfos); 
}

function main()
{
takeEventOut("http://MYSITE NAME/_vti_bin/owssvr.dll?XMLDATA=1&List=GUID");
}

_spBodyOnLoadFunctionNames.push("main");

</script>

  <div id="my-timeline" style="height: 300px; border: 1px solid #aaa"></div>

Original comment by sasireka...@gmail.com on 9 Jun 2011 at 12:24

[GoogleCodeExporter]

Original comment by ryan...@csail.mit.edu on 23 Jun 2011 at 9:58

• Added labels: Project-Timeline

[GoogleCodeExporter]

I am having this same issue but not sure how we hard code the locale in the two 
files you mentioned above

Original comment by joannek...@gmail.com on 9 Dec 2012 at 5:59