Search code examples
javascriptcssruby-on-rails-5.2adminlte

adminLTE 2.4.5 treeview not working properly after refresh only it is working in rails

version list:- * rails 5.2.2 * sass-listen (4.0.0) * sass-rails (5.0.7) * sprockets (3.7.2) * sprockets-rails (3.2.1) * turbolinks (5.2.0) * turbolinks-source (5.2.0)

I'm using adminLTE 2.4.5 version in rails 5.2.2 version. All files I'm loading, all adminLTE assets from the vendor folder, all UI is working fine, but the treeview for multi-level menus are not working properly.

case 1: It is working for the first time or when I manually refresh the web page.

case 2: When it is working, if I click on the link of a menu item the link will redirect to the specific page, but after that again treeview not works, it even not collapses.

Below is my code:

<aside class="main-sidebar">
  <section class="sidebar">
    <ul class="sidebar-menu tree" data-widget="tree">
      <li class="treeview">
        <a href="#"><i class="fa fa-wrench"></i> <span>Reminders</span>
           <span class="pull-right-container">
             <i class="fa fa-angle-left pull-right"></i>
           </span>
        </a>
        <ul class="treeview-menu">
          <li>
            <%=link_to "Service Reminders",service_reminders_path%>
          </li>
          <li><a href="#">Vehicle Renewals</a></li>
        </ul>
      </li>
   </ul>
 </section>
</aside>

Screenshots of working menu:

enter image description here

enter image description here

After clicking on the service reminder link it redirects to a specific page then treeview stops working

Solution
    • Don't disable the turbolinks because it speeds up the navigation between the pages in a rails application, instead of disabling you can get it working before that I'll explain why it is not working.
    • When using Jquery, $(function(){...}) shorthand to bind to the document ready event and it is commonly used.
    • Unfortunately, this with default configuration it will not work with turbolinks.
    • Even worst, it will work on full page loads, but the js code in the $(function(){...}) will not run on subsequent turbolinks-powered navigation as turbolinks does not trigger the document ready event.
    • I have resolved this by adding in the adminlte js file. $(document).on('turbolinks:load',function(){...})

    following is the code where I replaced the code inside a adminlte js file, Tree function.

    $(document).on('turbolinks:load', function(){
  $(Selector.data).each(function () {
    Plugin.call($(this));
  });
});