jQuery dropdown menu not working second time

Question

I'm using jQuery in a Rails app to create a dropdown menu. At first I thought it was a sprockets issue. The code in my nav.html.erb file is:

<nav>
  <%= link_to '#', class: 'toggle' do %>
    <i class="fa fa-bars"></i>
    <span>Menu</span>
  <% end %>
    <ul class = "menu-items">
      <li>
        <%= link_to root_path do %>
          <span>Home</span>
        <% end %>
      </li>
      <li>
        <%= link_to about_path do %>
          <span>About</span>
        <% end %>
      </li>
      <li>
        <%= link_to projects_path do %>
          <span>Projects</span>
        <% end %>
      </li>
      <li>
        <%= link_to blogs_path do %>
          <span>Blog</span>
        <% end %>
      </li>
      <li>
        <%= link_to contact_path do %>
          <span>Contact</span>
        <% end %>
      </li>
    </ul>
</nav>

The code in my nav.js file is:

$(document).ready(function() {
    var $switch = $('a.toggle'),
        $menu = $('nav ul.menu-items'),
        $icon = $('nav a.toggle i');

   $switch.on('click', function(e){
     e.preventDefault();
     $menu.toggle(function(){
     $icon.toggleClass('fa-bars fa-times');
   });

 });
});

When I refresh the page, I press menu nav bar and it reveals the drop down menu. I can click on one of the menu items and will be redirected to the page. On the new page I click the menu bar again and I get it's default behaviour, which just adds '#' to the url.

I think it has something to do with the document.ready function. On page refresh, the document.ready function runs but doesn't after being redirected from a page when I click a menu item.

Try `$(function() {` instead of `$(document).ready(function() {`. jQuery 3 deprecated that syntax because sometimes it had weird behavior. https://api.jquery.com/ready/ — yuriy636, Sep 09 '16 at 22:07

score 0 · Answer 1 · edited Sep 12 '16 at 17:58

0

It's because Turbolinks causes a page:change event to occur each time a link is clicked and because of that it reevaluates the Javascript every time. That's why it works at first but when you change pages it might dysfunction. This is the easiest work around for it.

 <script>
   $('.toggle').dropdown()
 </script>

You can also add data-turbolinks-eval=false to the application.html.erb <script> tag to interrupt the reevaluation after clicking on links.

like this:

Change <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> to <%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>.

edited Sep 12 '16 at 17:58

Mr Lister

45,515
15
108
150

answered Sep 09 '16 at 22:52

luissimo

916
2
10
31

Where am I adding the $('.toggle').dropdown() line. In nav.js or the application.html.erb file? – Coder_Nick Sep 09 '16 at 23:08
Put it in the application.html.erb at the end of the body – luissimo Sep 09 '16 at 23:09

score 0 · Answer 2 · edited May 23 '17 at 10:29

Thanks luissimo, I looked up the page:change problem you mentioned and found a solution on here. Rails 4: how to use $(document).ready() with turbo-links It lead me to the rails guides: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works

$(document).on ('turbolinks:load', function() {
  var $switch = $('a.toggle'),
  $menu = $('nav ul.menu-items'),
  $xburger = $('nav a.toggle i');

  $switch.on('click', function(e){
    e.preventDefault();
    $menu.toggle(function(){
      $xburger.toggleClass('fa-bars fa-times');
    });

  });
});

My responsive navigation bar is working fine now. It was a classic case of RTFM.

jQuery dropdown menu not working second time

2 Answers2