Question

I’ve used json_builder to generate the JSON file needed for the timeline from timeline.verite.co as it needs to be in a specific format. However, when I load the page, it gets stuck with a white background and a loading gif. It works if I give it a link to some sample data, but not the generated data for the user. The html page (users/1/events) works fine. Anyone have any idea why? I’ve run out of ideas now!!

UPDATE:

I got the JS to link to a static file with the pasted contents of the JSON from users/1/events.json, and it works fine. So I’m assuming the problem is that the page is blank when the JS tries to fetch it, and only get populated when you actually go to that URL. How do I get around this?

Generated JSON file (got by going to /users/1/events.json):

{
  "timeline": {
    "headline": "Emily",
    "type": "default",
    "text": "A Timeline",
    "startDate": "1922,10,30",
    "date": [
      {
        "startDate": "2012,11,17",
        "endDate": "2012,11,17",
        "headline": "My Birthday",
        "text": "This is my birthday",
        "asset": {
          "media": "http://www.youtube.com/watch?v=dePMU8R131s",
          "credit": "",
          "caption": "Happy Birthday"
        }
      }
    ]
  }
}

Required syntax:

{
    "timeline":
    {
        "headline":"Stuff People Say",
        "type":"default",
        "text":"People say stuff",
        "startDate":"2012,1,26",
        "date": [
            {
                "startDate":"2012,1,26",
                "endDate":"2012,1,27",
                "headline":"Stuff Politicians Say",
                "text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
                "asset":
                {
                    "media":"http://youtu.be/u4XpeU9erbg",
                    "credit":"",
                    "caption":""
                }
            },
            {
                "startDate":"2012,1,10",
                "headline":"Stuff Nobody Says",
                "text":"<p>Have you ever heard someone say “can I burn a copy of your Nickelback CD?” or “my Bazooka gum still has flavor!” Nobody says that.</p>",
                "asset":
                {
                    "media":"http://youtu.be/f-x8t0JOnVw",
                    "credit":"",
                    "caption":""
                }
            }
        ]
    }
}

controller (relevant bits):

class EventsController < ApplicationController

  respond_to :json, :html

def myevents
    @events = current_user.events
    respond_with @users
  end

end

routes:

resources :events do
    member do
      get 'myevents'
    end
  end

match 'users/:id/events' => 'events#myevents'

JS to call timeline:

<%= javascript_include_tag "/js/storyjs-embed.js" %>
        <script>
            $(document).ready(function() {
                createStoryJS({
                    type:       'timeline',
                    width:      '800',
                    height:     '600',
                    source:     '/users/<%= current_user.id %>/events.json',
                    embed_id:   'my-timeline'
                });
            });
        </script>

Answer 1

I found the answer in the end, the js for the form wasn’t reading the JSON file properly. I needed to add a callback.