New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JQuery Turbolinks Issue using AdminLTE Theme #563

Closed
wonderer007 opened this Issue Jul 7, 2015 · 13 comments

Comments

Projects
None yet
@wonderer007

wonderer007 commented Jul 7, 2015

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

This comment has been minimized.

Owner

almasaeed2010 commented Jul 10, 2015

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

This comment has been minimized.

billp commented Jul 28, 2015

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

This comment has been minimized.

GCorbel commented Sep 8, 2015

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

This comment has been minimized.

billp commented Sep 8, 2015

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 comment has been minimized.

GCorbel commented Sep 8, 2015

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

This comment has been minimized.

billp commented Sep 8, 2015

Cheers 🍻

@victorngkp

This comment has been minimized.

victorngkp commented Dec 29, 2015

Works like a charm. Thank you.

@doncadavona

This comment has been minimized.

doncadavona commented Apr 3, 2016

Thanks this saved me!

@pwalvarado

This comment has been minimized.

pwalvarado commented Aug 26, 2016

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

This comment has been minimized.

rio9791 commented Feb 21, 2017

It works like a charm, thanks @billp

@kungphanith

This comment has been minimized.

kungphanith commented Jun 5, 2017

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

This comment has been minimized.

rozhok commented Oct 11, 2017

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).

ashrafsabrym added a commit to OneToOneService/AdminLTE that referenced this issue Dec 28, 2017

@vanessasoutoc

This comment has been minimized.

vanessasoutoc commented Feb 20, 2018

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

@yu-san-19 yu-san-19 referenced this issue Apr 26, 2018

Closed

ブログ機能の管理画面を作る #25

3 of 7 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment