CODEWITHSUNDEEP
javascripthtml
tblznbits
tblznbits

Reputation: 6778

Javascript ReferenceError: TL not defined even though it's explicity defined in *.js file

I'm working on trying to utilize a local implementation of the Timeline JS tool by Knight Laboratories by following these instructions. Because my use cases will require JSON to be developed dynamically in R or Python, I'm trying to write the html file myself. The code I currently have is as follows:

html <- paste('<!DOCTYPE html><html><head><link title="timeline-styles", rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css"></head><body><script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script><div id="timeline-embed" style="width: 100%; height: 600px"></div><script type="text/javascript">var timeline_json=', readr::read_lines("~/projects/timelineJS/trial.json") %>% paste(collapse=''),'; window.timeline=new TL.Timeline("timeline-embed", timeline_json);</script></body></html>', sep='')
write(html, file="~/projects/timelineJS/test.html")

The output this produces appears to be what I'd want (cleaned up for readability):

<!DOCTYPE html>
<html>
<head>
  <link title="timeline-styles" rel="stylesheet" href="//cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
</head>
<body>
  <script src="//cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
  <div id="timeline-embed" style="width: 100%; height: 600px"></div>
  <script type="text/javascript">
    var timeline_json = {"title": {"media": {"url": "//www.flickr.com/photos/tm_10001/2310475988/", "caption": "Whitney Houston performing on her My Love is Your Love Tour in Hamburg.", "credit": "flickr/<a href='http://www.flickr.com/photos/tm_10001/'>tm_10001</a>"}, "text": {"headline": "Whitney Houston<br/> 1963 - 2012", "text": "<p>Houston's voice caught the imagination of the world propelling her to superstardom at an early age becoming one of the most awarded performers of our time. This is a look into the amazing heights she achieved and her personal struggles with substance abuse and a tumultuous marriage.</p>"}}, "events": [{"media": {"url": "https://youtu.be/fSrO91XO1Ck", "caption": "", "credit": "<a href=\"http://unidiscmusic.com\">Unidisc Music</a>"}, "start_date": {"year": "1978"}, "text": {"headline": "First Recording", "text": "At the age of 15 Houston was featured on Michael Zager's song, Life's a Party."}}]};
    window.timeline = new TL.Timeline("timeline-embed", timeline_json);
  </script>
</body>
</html>

The problem is that nothing shows up when I load the html file and when I check the console, I get the error ReferenceError: TL is not defined. This doesn't make sense to me, though, because the function TL.Timeline is explicitly defined at the end of the .js file that is sourced in the body of the html.

I don't know enough about javascript to try to debug, so I was hoping someone here might have an idea. Thanks in advance!

Upvotes: 1

Views: 1563

Answers (1)

tblznbits
tblznbits

Reputation: 6778

@melpomene asked the right question in the comments about and got me looking to see if the JS file was being loaded. The answer is that it was not because the url provided in the <script> tags was not valid. Adding "https:" to the beginning of both urls got the code to work.

The reason TL was not defined is because the JS file was not loading due to a faulty url.

Upvotes: 1

Related Questions