I am using RoR and one thing baffles me, maybe I'm missing something, as I have built new navbar, and this sidebar display on mobile only, not in desktop and it's working fine prefect. Turbolink is ready to function.
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
however when I click on another page through and the sidebar is no longer working, it shows only collapsed dropdown, so I have to refresh the browser again to get sidebar back.
Here is code for sidebarNav.js as this code is on the application.js require
window.onload = function () {
window.jQuery ? $(document).ready(function () {
$(".sidebarNavigation .navbar-collapse").hide().clone().appendTo("body").removeAttr("class").addClass("sideMenu").show(), $("body").append("<div class='overlay'></div>"), $(".navbar-toggle").on("click", function () {
$(".sideMenu").addClass($(".sidebarNavigation").attr("data-sidebarClass")), $(".sideMenu, .overlay").toggleClass("open"), $(".overlay").on("click", function () {
$(this).removeClass("open"), $(".sideMenu").removeClass("open")
})
}), $(window).resize(function () {
$(".navbar-toggle").is(":hidden") ? $(".sideMenu, .overlay").hide() : $(".sideMenu, .overlay").show()
})
}) : console.log("sidebarNavigation is working")
};
Nav code in html.erb
<!-- Static navbar -->
<nav class="navbar navbar-inverse navbar-default navbar-static-top navbar-margin-bottom sidebarNavigation"
data-sidebarClass="navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle left-navbar-toggle" data-toggle="collapse"
data-target="#myNavbar" aria-expanded="false" aria-controls="myNavbar">
<span class="sr-only">Toggle navigation</span>
</button>
<%= link_to root_path do %>
<span>
<%= image_tag("youhire-logo-2.png", :alt => "youhire logo", :class =>"youhire-logo pull-left") %>
</span>
<% end %>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<% if (!user_signed_in?)%>
<li><%= link_to t('help'), root_path %></li>
<% else %>
<li><% if current_user.role %> <%= link_to "List your equipment", new_tool_path %> <% end %></li>
<li><%= link_to t('help'), root_path %></li>
<% end %>
<% if (!user_signed_in?)%>
<li><%= link_to t('signup'), choice_path %></li>
<li><%= link_to t('login'), new_user_session_path %></li>
<% else %>
<li>
<%= link_to notifications_path do %>
<i class="fa fa-bell fa-2x"></i>
<span class="badge"
id="navbar_num_of_unread"><%= current_user.unread if current_user.unread > 0 %></span>
<% end %>
</li>
<li class="dropdown">
<% if current_user.role %>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
<%= current_user.company %>
<span class="caret"></span></a>
<% else %>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">
<%= current_user.fullname %> <%= current_user.surname %>
<span class="caret"></span></a>
<% end %>
<ul class="dropdown-menu">
<li><%= link_to t('dashboard'), dashboard_path %></li>
<li><%= link_to t('toolrent'), your_tools_path %></li>
<li><%= link_to t('editprofile'), edit_user_registration_path %></li>
<li role="separator" class="divider"></li>
<li><% if current_user.role %><%= link_to t('addlisting'), new_tool_path %> <% end %>
</li>
<li><% if current_user.role %><%= link_to t('viewlisting'), tools_path %> <% end %></li>
<li><%= link_to "Orders received", reservations_tools_path %></li>
<li role="separator" class="divider"></li>
<li><%= link_to t('logout'), destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<% end %>
</ul>
</div>
</div>
</nav>
I must be missing something
Take the $(document).ready out of the window.onload event...
I suspect you are using AJAX for your page loads, because window.onload is only executed once when the website loads, and further AJAX requests do not trigger the window.onload event.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.