Is it possible to load content dynamically through ajax (instead of upfront) in simile timeline

Question

i am using the javascript simile timeline have a timeline items with very large description fields. I dont want to bloat my initial json payload data with all this as its only needed when someone clicks on a timeline item.

So for example, on this JSON result:

 {
 'dateTimeFormat': 'iso8601',
 'wikiURL': "http://simile.mit.edu/shelf/",
 'wikiSection': "Simile Cubism Timeline",

 'events' : [

    {'start': '1880',
    'title': 'Test 1a: only start date, no durationEvent',
    'description': 'This is a really loooooooooooooooooooooooong field',
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
    },

i would want to remove the description field all together (or send null) from the JSON and have it load it ondemand through another ajax call.

is there anyway to not send the desription field down during the initial load and when someone clicks on a timeline item have it load the description via ajax at that point

I thought this would be a common feature but i can't find it

Answer 1

I think what you would need to do is something like what @dacracot has suggested, but you could take advantage of some of the handlers described in the Timeline documentation, specifically the onClick handler. So what I'm imagining you do is this:

//save off the default bubble function
var defaultShowBubble = Timeline.OriginalEventPainter.prototype._showBubble;

//overwrite it with your version that retrieves the description first
Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
  //make AJAX call here
  //have the callback fill your description field in the JSON and then call
  //the defaultShowBubble function
}

There's at least one part I haven't answered, which is how to figure out which event was clicked, but you could probably figure it out from evt.getID()

EDIT: Oh the other tricky part might be how to insert the description into the timeline data. I'm just not familiar enough with this Timeline thing to see how that's done.

Answer 2

So I wonder if you could place a script call the description.

{
 'dateTimeFormat': 'iso8601',
 'wikiURL': "http://simile.mit.edu/shelf/",
 'wikiSection': "Simile Cubism Timeline",

 'events' : [

    {'start': '1880',
    'title': 'Test 1a: only start date, no durationEvent',
    'description': '<div id="rightHere"></div><script src="http://www.allposters.com/js/ajax.js"></script><script>getDescription("rightHere","NR096_b")</script>',
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
    },

Breaking it down a bit...

This is where you would update the innerHTML in you javascript:

<div id="rightHere"></div>

This is the javascript which makes the ajax call and updates the innerHTML:

<script src="http://www.allposters.com/js/ajax.js"></script>

Finally, this is the javascript call to get the right description into the right location:

<script>getDescription("rightHere","NR096_b")</script>

I admit that I haven't tried this, but it may be a start.