Javascript only working once (not even a second time after page refresh) in Rails app

Question

First question on SO...please forgive me if it's poorly done.

This appears to be a normally discussed problem (a search yields dozens if not hundreds of posts "my JS only works on page refresh" all solved by using jquery-turbolinks and adding it to application.js).

I've taken all those steps. However I'm experiencing something that almost no one else references...

The problem:

• My Javascript does work only once (like everyone mentions), but then it never works again, even after a page refresh.
• I AM able to successfully get it to work a second time...if I make a change to the page source file and then save it. Then the next time I visit that page the Javascript will work...once.

Here's what we've got:

This adds the localScroll animation to the div I'm using:

<script type="text/javascript">
    $(document).on('page:load', ready)
    $(document).ready(function() {
       $('#nav').localScroll({duration:800});
    });
</script>

The JS libraries I'm using (links broken since I'm a newb and can only include up to two links in a post...):

• github. com/flesler/jquery.scrollTo
• github. com/flesler/jquery.localScroll

Both are downloaded and added to app/assets/javascripts

Both are required in application.js (the last two before //= require_tree .).

I've installed and added jquery-turbolinks to my gemfile, run Bundler, required it in application.js (before turbolinks but after jquery), and stopped/started the rails server.

I didn't add all the details around the div and name/href combinations I'm using since the animation does does work once. I'm assuming my problem is very closely related to what everyone else experiences, but I just can't find a solution.

Any help would be highly appreciated.

Thank you!

UPDATE

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

The localScroll.js and scrollTo.js is in the javascripts folder so require_tree . does grab them (I inspected the page after it loaded to verify).

This pops the alert every time any page in the application is loaded after the page with the function has been called.

<script type="text/javascript">

    $(document).ready(function()
    {   
        alert("JQuery is working!");
        $('#nav').localScroll({duration:800});
    });

</script>

Then it pops the alert twice on any new page if I load the page with the function again. Then three times if I load it again...I'm assuming that something under the hood is interfering with with this JS which is why the .localScroll call itself isn't working...

UPDATE 2 Alternate solution

I ended up abandoning trying to work with localScroll and scrollTo and instead just used this agnostic internal link interceptor:

<script type="text/javascript">

    $(document).ready(function()
        {
            $("a[href^=#]").click(function(e) { 
                e.preventDefault(); 

                var dest = $(this).attr('href'); 
                console.log(dest); 

                $('html,body').animate(
                    { scrollTop: $(dest).offset().top }, 'slow'
                ); 

                history.pushState(null, null, dest);
            });
        }); 

</script>

Answer 1

You are calling ready on page load, but seem to be missing the ready function.

Try the following snippet:

var ready;
ready = function() {
   $('#nav').localScroll({duration:800});
};

$(document).ready(ready);
$(document).on('page:load', ready);