Timeline sometimes not loading

[bsod999]

Hi, thanks very much for your work with this timeline. I've one issue which I'm hoping you can help with, which is the timeline doesn't always load when viewed in web-app mode on an iPad. The data is being loaded from a Google spreadsheet and works consistently when viewed in mobile Safari. Without knowing or expecting you to know the reason for this, I was just wondering if there's a way to retry initialising the timeline when it doesn't load correctly first time. E.g a setTimeout call or something like that. 

When trying to debug this, I've noticed that on the occasions when the timeline doesn't load, the build function in timeline.js isn't being called. I'm not sure if that helps any. 

Thanks for any help!

[Zach Wise]

When debugging, does the data get loaded?

[bsod999]

Note that I'm using qtip to show slide content differently from your original example, but this shouldn't be the cause of the issue. Also, there are no errors in firebug when running any of this code

On Thursday, 26 July 2012 16:17:19 UTC+1, bsod999 wrote:

To debug, I've just been adding alerts and stepping through the timeline.js file. Quite often, the "Loading Timeline" message is shown, but nothing else happens. It's tricky to debug given that it's only happening in web-app mode. Is there a way to try and load the data again if it doesn't load first time? 

This is the code I have at the moment, if it helps:

<script type="text/javascript">

    var timeline_config = {

        width: "100%",

        height: "100%",

        source: 'https://docs.google.com/spreadsheet/pub?key=0AjBXQzxyIKf2dGkwVmFOVXVLc2Vfbk02SVh6ZEZoR0E&output=html',

        css: 'http://staging.jem-digital.com/babcock-app/compiled/css/timeline.css', //OPTIONAL

        js: 'http://staging.jem-digital.com/babcock-app/compiled/js/timeline.js' //OPTIONAL

    }

</script>

<script type="text/javascript" src="http://staging.jem-digital.com/babcock-app/timeline/../compiled/js/timeline-embed.js"></script>

<!-- END Timeline Embed -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add fancyBox -->

<link rel="stylesheet" href="http://staging.jem-digital.com/babcock-app/timeline/jquery.fancybox.css?v=2.0.6"

type="text/css" media="screen" />

<script type="text/javascript" src="http://staging.jem-digital.com/babcock-app/timeline/jquery.fancybox.js?v=2.0.6"></script>

<link rel="stylesheet" href="http://staging.jem-digital.com/babcock-app/timeline/jquery.qtip.css"

type="text/css" media="screen" />

<script type="text/javascript" src="http://staging.jem-digital.com/babcock-app/timeline/jquery.qtip.js"></script>

<script>

    function timelineLoaded() {

        $('.feature').css('height', '0');

        $('div.close a').click(function () {

            $('.feature').css('height', '0');

        });

        $('.flag').each(function (index) {

            $(this).qtip({

                content: {

                    text: $('.slider-item').eq(index),

                    title: {

                        text: 'Paisley Canal Electrification',

                        button: 'Close'

                    }

                },

                show: {

                    event: 'click',

                    solo: true

                },

                position: {

                    my: 'center',

                    at: 'center',

                    //viewport: $(window)

                    target: $(window), // Or $(document.body), if you don't want it centered as you scroll

                    adjust: {

                        y: 100

                    }

                },

                hide: {

                    event: 'unfocus',

                    delay: 1000

                },

                style: {

                    classes: 'ui-tooltip-light ui-tooltip-rounded'

                }

            });

        });

    }

    function checkTimeline() {

        if ($('.flag-content').length > 0) {

            timelineLoaded();

        } else {

            window.setTimeout(checkTimeline, 1000);

        }

    }

[Zach Wise]

Tray adding degug=true to your config.

[bsod999]

I added debug: 'true' to the config array but it doesn't show anything when the timeline fails. 

I assume the following function should trigger the error message:

function trace( msg ) {

if (VMM.debug) {

if (window.console) {

console.log(msg);

} else if ( typeof( jsTrace ) != 'undefined' ) {

jsTrace.send( msg );

} else {

alert(msg);

}

}

}

[Zach Wise]

It should show up in the console. Make sure you set mobile safari's developer mode to on.

[bsod999]

The debug console doesn't show in web-app mode unfortunately. Aargh. If I view the timeline in mobile safari, I see the debug console with all the log messages and no errors. 

[Zach Wise]

What if you used it in an iFrame inside the webapp?

[bsod999]

Hi again, I tried using an iFrame to load the timeline as you suggested, and the issue still seems to happen occasionally - both in web-app mode and in mobile safari. Most of the time it loads fine, but I need to iron out these occasional failures. Is there anything you can think of that would be causing the google s/sheet sometimes not to be processed? 

[bsod999]

Hi Zach. After further testing, it seems the occasional failure to load the timeline isn't only happening in iOS - I managed to catch the output from the console when it failed once in Chrome. The readout gets to DATA SOURCE: GOOGLE SPREADSHEET then stops, leaving the "Loading Timeline" message on screen. Do you know why this might be happening? Also, do you think it's possible to refire the getData function if it doesn't load first time around? Thanks in advance for any help

On Thursday, 26 July 2012 16:58:25 UTC+1, Zach Wise wrote:

[Zach Wise]

The problem is probably Google Docs is not responding. I can look into a timeout for the call but it probably won't make much of a difference. Do you happen to have a flaky internet connection?

[bsod999]

Yeah, must be that. The issue's been happening on a few wi-fi connections in different offices, so don't think it's the internet connection. If there's an easy enough way to set a timeout, then re-attempt the call, then that would be great

[Zach Wise]

I just committed a timout for google doc loading to the canary build on GitHub https://github.com/VeriteCo/TimelineJS/commit/09b68c4cceb2a850c28d8eaadb0cf79c0244b530

I will push changes to the embed site tonight or tomorrow morning.

[bsod999]

Great work! I'll add this and let you know how it goes Many thanks. 

[bsod999]

Hi, I've caught this error happening from time to time. Loading the slider via iframe has definitely cut down on the amount of times it happens but it is still there occasionally. I've changed the error message to ask the user to click the link and reload the data, but would it be possible to refire the getData call after the timeout? Thanks for all your help so far!

[Zach Wise]

Can you try the "Canary" build and let me know if that helps? It should try and get the data from Google again if it fails the first time. I can't replicate the problem on my end but I made some changes that might help:

https://github.com/VeriteCo/TimelineJS/tree/Canary

Download:

https://github.com/VeriteCo/TimelineJS/zipball/Canary