CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-4
dabadaba
dabadaba

Reputation: 9512

Rails 4: javascript not working after first refresh

I have a floating image with an image link were you can go to the home page and when you hover over it a "zoom out" icon appears over it so you can minimize this image and move it into de navigation bar. This floating fixed image is shared in all views, it's in the application.html.erb file. The HTML looks like this:

<div class="col-sm-12 profile-float-container">
    <div class="profile-float-wrapper">
        <span class="glyphicon glyphicon-zoom-out minimize"></span>
        <a href="/">
            <img class="img-circle profile-nav-img" src="/system/users/avatars/000/000/004/small/dog.jpg?1438125939" alt="Dog">
        </a>
    </div>
</div>

It works. However, when this happens, the javascript is completely disabled after jumping to any other page in the app.

This is the javascript, located in application.js:

$(function() {
    $('.minimize').on('click', function() {
        $('.profile-float-wrapper').fadeOut();
        $('.profile-nav-li').fadeIn();
    });

    $('div, span').on('click', function() {
        alert($(this).attr('class'));
    });
});

To explain what happens, first when the floating image is clicked the alerts pop out, and of course the effects work. However, after that when navigating through the app clicking any div or span doesn't trigger any alert. It's like the javascript is not being loaded.

Upvotes: 1

Views: 708

Answers (1)

tombeynon
tombeynon

Reputation: 2346

Sounds like this might be Turbolinks getting in the way. Since the document isn't reloaded with Turbolinks, $(document).ready(function(){}) (or your shortened version $(function(){})) doesn't get fired. You'll need to hook into the Turbolinks page load event too.

var ready;
ready = function() {
   $('.minimize').on('click', function() {
        $('.profile-float-wrapper').fadeOut();
        $('.profile-nav-li').fadeIn();
    });

    $('div, span').on('click', function() {
        alert($(this).attr('class'));
    });
};

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

You can read more about the Turbolinks events here https://github.com/rails/turbolinks#events.

Turbolinks is automatically included in new Rails 4 projects, so chances are that's causing your problems. Add data-no-turbolink to your <body> tag if you want to completely disable it, or follow the below steps to completely uninstall.

  1. Remove gem "turbolinks" from your Gemfile and bundle install.
  2. Remove //= require turbolinks from application.js
  3. Remove any data-turbolinks-track attributes in your layout views.

Upvotes: 3

Related Questions