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

That would be a server side issue. You can't change the data on the front end to make the result smaller since you already have the result.

Use a different call or add parameters.

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"&gt;&lt;/script&gt;&lt;script&gt;getDescription("rightHere","NR096_b")&lt;/script&gt;',
    '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"&gt;&lt;/script&gt;

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.

Answer 3

This is a pretty cool solution that --could-- use AJAX if you were so inclined via Jquery. Very nice result!

http://tutorialzine.com/2010/01/advanced-event-timeline-with-php-css-jquery/

Answer 4

I'm assuming you're using PHP, and have the sample JSON in a String:

//I have the JSON string in $json::
$jsonArr = json_decode($json);
$jsonOput = array();

//move descriptions into a numbered array, (E.G. a JSON [])
foreach($jsonArr['events'] as $a=>$b) {
    $jsonOput[] = $b['description'];
    unset($jsonArr['events'][$a]['description'];
}

//Output the original JSON, without the descriptions
echo json_encode($jsonArr);
//Output the JSON of just the descriptions
echo json_encode($jsonOput);

Obviously you'd only output the description free, or the only descriptions; depending on what's requested.

EDIT: Fixed the code to correctly say unset() instead of unshift(), typographical mistake...

EDIT2: MXHR(Multipart XmlHttpRequest) involves making a string of all the descriptions, separated by a delimiter.

$finalOput = implode('||',$jsonOput);

And make a request for that long string. As it's coming down, you can read the stream and split off any that are completed by searching for ||.

Answer 5

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 6

I also had to do something like that in an asp.net MVC Application. In my case i had to do it on a page load. You can do it on some conditions\events too.

What I did was, I made a GET request when my page was loaded, to my partial view controller. From there I returned a "PartialViewResult". Then in the UI I placed it where it needed to be rendered. Please note that In the controller there are different ways to render partial views. I did not hard code the UI Html in the controller. That wouldn't be a good practice. I got the UI rendered by:

return PartialView("~/UserControls/Search.ascx", model);

Which is basically your view engine is rendering the UI Html. :) If you want to have a look at my implementation here is the link: http://www.realestatebazaar.com.bd/buy/property/search

Hope that helps.