JQuery Turbolinks Issue using AdminLTE Theme

[wonderer007]

I am using AdminLTE theme in my Rails project and have enabled Turbolinks, Everything is working fine except there is one issue that when i click on left menu my content-wrapper doesn't load properly instead i have to reload the page to load it properly. This is a very common issue in Turbolinks and we normally resolved by using

$(function () { /* ... / }); instead of $(document).on('ready', function () { / ... */ });
and
$(document).on('click', 'button', function() { ... }) instead of $(document).on('click', 'button', function() { ... })
So far i have tried in app.js to but no effect can you please guide me where do i need to change to load view properly .
Thanks

[almasaeed2010]

I am not sure what TurboLinks is. Could you please clarify.

Also, those are the same

$(document).on('click', 'button', function() { ... }) instead of $(document).on('click', 'button', function() { ... })

Thanks!

[billp]

I had an issue with the page height when I clicked on button with turbolinks enabled, the height of layout just shrinked. To solve it I just called $.AdminLTE.layout.activate(); from the CoffeeScript:

ready = ->
  $.AdminLTE.layout.activate();

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

[GCorbel]

I have the same problem. When I use a sidebar-toggle it works when I reload the page but not when I visit a new page and turbolink loads it.

The @billp 's code does not work. $.AdminLTE.layout.activate() do nothing.

[billp]

Yes you are right, the code above works in some cases only.
Try this:

ready = ->
  o = $.AdminLTE.options
  if o.sidebarPushMenu
    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector) 
  $.AdminLTE.layout.activate()

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

[GCorbel]

This code works in coffeescript :

$(document).ready ->
  $.AdminLTE.layout.activate()

$(document).on 'page:load', ->
  o = $.AdminLTE.options
  if o.sidebarPushMenu
    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector)
  $.AdminLTE.layout.activate()

And the equivalent in JavaScript :

$(document).ready(function() {
  $.AdminLTE.layout.activate();
});

$(document).on('page:load', function() {
  var o;
  o = $.AdminLTE.options;
  if (o.sidebarPushMenu) {
    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
  }
  $.AdminLTE.layout.activate();
});

Thanks @billp

[billp]

Cheers 🍻

[vicovictor]

Works like a charm. Thank you.

[doncadavona]

Thanks this saved me!

[pwalvarado]

If you are using turbolinks 5, change above a little:

var ready = function () {
  var o;
  o = $.AdminLTE.options;
  if (o.sidebarPushMenu) {
    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
  }
  return $.AdminLTE.layout.activate();
};
document.addEventListener('turbolinks:load', ready);

[rio9791]

It works like a charm, thanks @billp

[kungphanith]

You can remove
//= require app
from application.js then add
in config/initialize/assets.rb
Rails.application.config.assets.precompile += %w( app.js )
in admin_lte_layout
= javascript_include_tag 'app', 'data-turbolinks-track': 'reload'
after body tag.
because admin_lte javascript is needed to add at before body tag.

---

for me work well, Hope work well for you. thanks!

[rozhok]

Just in case someone will came here from hours of stackoverflowing, here's solution

var ready = function () {
    return $(window).trigger('resize');
};
document.addEventListener('turbolinks:load', ready);

Add this to your js file (which will be included into application.js via require_tree . or manual include).

[vanessasoutoc]

Use rails 5.1, turbolinks 5 and admin lte v 2.4.2
Not work for me! Help

[rahulpattanshetty]

Hi guys please help me out with this issue
https://stackoverflow.com/questions/54956246/adminlte-2-4-5-treeview-not-working-properly-after-refresh-only-it-is-working-in @pwalvarado @billp

[vishhnu-dev]

Just in case someone will came here from hours of stackoverflowing, here's solution

var ready = function () {
    return $(window).trigger('resize');
};
document.addEventListener('turbolinks:load', ready);

Add this to your js file (which will be included into application.js via require_tree . or manual include).

nice, this works for me.

[vishhnu-dev]

On adminlte.js u can also modify the code below:

// Tree Data API
// =============
$(window).on('load', function () {
    $(Selector.data).each(function () {
      Plugin.call($(this))
    })
})

to

// Tree Data API
// =============
$(document).on('turbolinks:load', function(){
    $(Selector.data).each(function () {
        Plugin.call($(this))
    })
})

[LEstradioto]

In my case had problems with PushMenu and Turbolinks
Tried all above but the only code that worked it out to avoid monkeypatching:

// javascript/packs/application.js

global.$.AdminLTE = require("admin-lte")

$(document).on('turbolinks:load', function () {
    $.AdminLTE.Layout._jQueryInterface.call($('body'));
});

w/ AdminLTE 3.1.0 and Rails 6

for other plugins you should probably change Layout with IFrame, etc... and maybe there is a faster way, but this was enough for me ;)