ProgressBar.js only works after page refresh

Question

I'm trying to use ProgressBar.js in my Rails application, but I confess that I don't know much Javascript. I have this code in one of my views:

<div class="circleprogress" id="circleprogress"></div>

<script type="text/javascript">
window.onload = function onLoad() {
    var circle = new ProgressBar.Circle('#circleprogress', {
        color: '#38A6A6',
        duration: 3000,
        easing: 'easeInOut',
        strokeWidth: 7,
        trailColor: '#D5D5D5',
        trailWidth: 1,
        text: {
            value: <%= (@percentage_of_goal * 100).round %> + '%'
        },
    });

    circle.animate(<%= @percentage_of_goal%>);
};
</script>

And @percentage_of_goal is already defined in my controller. The code works fine, but only after I refresh the page.

I've looked at other questions which seem to have the same problem, but the solution is to install the jquery-turbolinks gem, and I've already done that and required it in my application.js, and it still only works after reload.

How do I fix this?

what if you change window.onload to window.ready? – ruby_newbie Jan 29 '16 at 16:58 — ruby_newbie, Jan 29 '16 at 16:58

neanderslob · Answer 1 · 2016-01-29T23:04:16.850

Often times turbolinks (or the configuration of your js functions) is the culprit. In looking at your code, window.onload = function onLoad() would likely require you to reload the page if you're using turbolinks.

Instead, try this:

window.ready = function onLoad()

Here's why: Turbolinks works by loading a layout once and then as you browse to different pages, it updates the specific elements asynchronously. Therefore, .onload doesn't work because your new page never actually "loads" in the traditional sense of the word, it just updates the old content via javascript. This of course makes your site really quick but you just need to get used to calling your javascript functions a little differently (see above).

If the above doesn't work, see what happens if you temporarily get rid of turbolinks (remember to bundle install when doing so) but I'll bet you dollars to doughnuts that's the issue.

Regarding jquery-turbolinks: I would advise against using this gem for two reasons (if I've got it wrong folks, set me straight). First, it's good to avoid an excessive number of gems in your app and chances are you really can cover most of this gem's advantages by making the above change to your javascript. Second, it hasn't been updated in a year and a half so... yea.

One last tip about negotiating turbolinks sometimes you'll want a particular link to just do a classic non-asynchronous load without using turbolinks (if you're jumping between layouts for instance). In such a case you can include the no_turbolink attribute like so: <%= link_to "Home", home_path, data: {no_turbolink: true} %>

I tried `window.ready` instead of `window.onload`, but it doesn't work. So then I got rid of turbolinks, and it worked fine (and loaded on the first try). The thing is that I probably want to keep turbolinks in my application, so what should I do? — liver, Jan 30 '16 at 16:58

score 0 · Accepted Answer · edited May 23 '17 at 12:31

I found the solution from here: Rails 4: how to use $(document).ready() with turbo-links

What I did was this:

var ready;
ready = function() {
    var circle = new ProgressBar.Circle('#circleprogress', {
        color: '#38A6A6',
        duration: 3000,
        easing: 'easeInOut',
        strokeWidth: 7,
        trailColor: '#D5D5D5',
        trailWidth: 1,
        text: {
            value: <%= (@percentage_of_goal * 100).round %> + '%'
        },
    });

    circle.animate(<%= @percentage_of_goal%>);
};

$(document).ready(ready);

Which according to the other question works with turbolinks.

ProgressBar.js only works after page refresh

2 Answers2