Update JSON text file with HTML form input

Question

I'm sorry if this has been answered somewhere else. I really did search A LOT but nothing quite answered my question. Also, I'm a bit new, so please keep that in mind when answering...

I have a timeline that I'm using from http://timeline.verite.co/ It is a great timeline and can be udpated via a JSON file. However, I want to be able to update the JSON file via a user form on my website.

For example: There is an Admin page...the code for the form area is here:

        <div id = "contentarea">    
        <div id="tab1">
            <form id="randomevents" method="POST" action="#">
                <ul>
                    <li><label for="event_title">Event Title</label>
                        <input id="event_title" type="text"></li>
                    <li><label for="event_details">Event Details</label>
                        <textarea rows="15" cols="44"></textarea></li>
                    <li><label for="date">Date: ex "mm/dd/yyyy"</label>
                        <input id="date" type="text"></li>
                    <div id="submitevent"><button type="submit" class="button">Submit</button></div>

                </ul>
            </form>

The timeline is located on another page...it's code is this:

        <div id="timeline-embed"></div>
    <script type="text/javascript">
        var timeline_config = {
        width:              '100%',
        height:             '300px',
        source:             'data.json',
        start_at_end:       false,                          
        start_at_slide:     '1',                            
        hash_bookmark:      true,                           
        font:               'Bevan-PotanoSans',             
        maptype:            'watercolor',                   
        css:                'js/maintimeline/compiled/css/timeline.css',    
        js:                 'js/maintimeline/compiled/js/timeline-min.js'   
    }

</script>

The JSON file looks like this (partial):

{
"timeline":
{
    "headline":"Helen Queen",
    "type":"default",
    "text":"A beautiful mother, wife, woman",
    "date": [
        {
            "startDate":"1924,1,26",
            "headline":"A little girl is born into a big family!",
            "text":"<p>Helen is born on January 11, 1924. She is the fifth girl and the eight overall child!</p>",
            "asset":
            {
                "media":"images/fortimeline/helen.jpg",
                "credit":"",
                "caption":""
            }
        },

What I want is for a user to enter content into the form on the Admin page and have it update (and add to) the JSON file, which then will automatically update the Timeline page. Like I said, I've searched for answers but nothing quite matched up or the answers were to confusing for me to follow!

Thanks!

Answer 1

Your admin area should send the changed file to the server, I suppose you have that part implemented.

What your timeline page (client) needs to do is get informed that there is a change in the data. That can be done in basically two ways:

• regularly poll the server to ask if there are changes. This is really easy to do: create a timer which for example every 60 seconds requests the data again from the server, compares it to the data it had, and if changed, redraws the timeline. This method requires nothing special on the serverside. A more efficient way is not to retrieve the complete file again and again, but implement a server side method like "getLastUpdatedTimestamp", which returns the time the file was last updated. The client can then compare this timestamp instead of the whole file, and if changed, retrieve the new file.

• get informed by the server automatically via a push notification. This would be the nicest solution, but is not yet very easy to implement (requires keeping a socket open between the client and the server, which is only supported by modern browsers).