0

I saved a response made by a @restcontroller in a JavaScript variable.

The response you get invoking an URL like localhost:8080/JSORresponse is a JSONresponseTimeline(B), B is a Bean.

The library I'm using is timelineJS . That's the interested part of the documentation:

Source

source should be either the path to the JSON resource to load, or a JavaScript object corresponding to the Timeline model.

Here is an example using a data object:

 var dataObject = {timeline: {headline: "Headline", type: ... }}
    createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     dataObject,
        embed_id:   'my-timeline'
    });

If source is a string, we will try to automatically recognize resources that are Twitter searches, Google Spreadsheets or Storify stories. Failing that, we assume the source is either JSON or JSONP. If string matches on .jsonp, we will treat it as JSONP, otherwise, we will append ?callback=onJSONP_Data. See more details below.

My code is as follows, but something doesn't seem to work, because I get a full blank page without my timeline (it is correctly set, and works with a mocked JSON). I don't get any errors in the console. Does anybody have an advice about how to solve this problem? (beerS is the exact representation of the JSON I need to use)

var beer;
$.getJSON("http://localhost:8080/timeline",function(json){
    beer = json;   
    checkDrink();                
});         

function checkDrink() {
    console.log(JSON.stringify(beer));
    var beerS = JSON.stringify(beer)
    var timeline_config = {
        width: "100%",
        height: "100%",
        source: beer
    }
}

if I do THIS the timeline work fine

  var beer;
      $.getJSON("http://localhost:8080/timeline",function(json){
          beer = json;   
          checkDrink();                
      });         

      function checkDrink() {
          console.log(JSON.stringify(beer));
          var beerS = JSON.stringify(beer)

          var timeline_config = {
           width: "100%",
           height: "100%",
           source: "../../resources/js/test_extra_html.json"
          }
      }   


      var timeline_config = {
       width: "100%",
       height: "100%",
       source: "../../resources/js/test_extra_html.json"
      }

obviously with the informations inside "test extra html" and not the JSON from "beer"

I additionally put all the jsp front page here to help you understand

 <head>
    <title>Timeline JS Example</title>
    <meta charset="utf-8">
    <meta name="description" content="TimelineJS example">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Style-->
    <style>
      html, body {
       height:100%;
       padding: 0px;
       margin: 0px;
      }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body>
      <!-- BEGIN Timeline Embed -->
      <div id="timeline-embed"></div>
      <script type="text/javascript">

      var beer;
      $.getJSON("http://localhost:8080/timeline",function(json){
          beer = json;   
          checkDrink();                
      });         

      function checkDrink() {
          console.log(JSON.stringify(beer));
          var beerS = JSON.stringify(beer)

          var timeline_config = {
           width: "100%",
           height: "100%",
           source: "../../resources/js/test_extra_html.json"
          }
      }   


      var timeline_config = {
       width: "100%",
       height: "100%",
       source: "../../resources/js/test_extra_html.json"
      }


      </script>
      <script type="text/javascript" src="../../resources/js/storyjs-embed.js"></script>
      <!-- END Timeline Embed-->
  </body>
</html>
Mattew Trincanati
  • 191
  • 1
  • 1
  • 9
  • Well, you are not doing anything with `timeline_config`. – Felix Kling Feb 23 '15 at 16:52
  • sorry question not clear, I have configured all the library and html page, but they are working, the problem is if I have all inside that function the timeline does not show, now i update the question with more code – Mattew Trincanati Feb 23 '15 at 17:02
  • 1
    I assume it's similar to your previous problem: The timeline thingy gets initialized before `timeline_config` is set. You have to initialize it inside the callback. But given that `source` can be a URL, why are you using `getJSON` at all and not just set `source` to `http://localhost:8080/timeline` ? – Felix Kling Feb 23 '15 at 18:04
  • From the documentation you posted, it assumes it's a URL because you are passing it a JSON string and tries to load it? You should pass in the parsed JSON, `beer`, instead of the JSON string – Ruan Mendes Feb 23 '15 at 18:43
  • Ok there was a problem with the JSON when i tryed to put only the URL in source, but now I re-tryed and it's working, thank you all ;) – Mattew Trincanati Feb 24 '15 at 08:45

0 Answers0