Adminlte: Uncaught TypeError: Cannot read property 'options' of undefined

[kaynewilder]

My sidebar is broken.The menu doesn't seem to dropdown. I inspected element and found this error:

Uncaught TypeError: Cannot read property 'options' of undefined

I have read similar problems but I can't seem to find the answer to mine.

[almasaeed2010]

You are going to have to give a little more details to your problem. Where does that problem occur? Which JS file produced this error? Which version of AdminLTE are you using? Any other information that you can place here will help us help you. Thanks.

[kaynewilder]

Hi. I was using this: https://github.com/almasaeed2010/AdminLTE and the problem occurs when I load my index page, the side nav is broken, like the submenus are showing already and also the charts are not visible, it's just blank space. But anyway, I have found an alternate solution. I have used the asset bundle instead and now it is working fine.

[theroadrunnershow]

Hi I am having this same issue. I am using AdminLTE-2.0.3. Any help would be super, as I cannot seem to find the problem. COuld you please help?

This error seems to be occuring in app.js, when we are trying to retrieve the options of adminLTE object. (line 128: var o = $.AdminLTE.options;)

Please note: I am trying to use this with meteorJS.

Error details
Uncaught TypeError: Cannot read property 'options' of undefined app.js?6e718cf14bb55f1e3752044b0e79a4027a4b22f6:128 (anonymous function)jquery.js:3143 jQuery.Callbacks.firejquery.js:3255 jQuery.Callbacks.self.fireWithjquery.js:3467 jQuery.extend.readyjquery.js:3498 completed

[Seany84]

I had this error and found that by moving my script reference from the to right before the closing body tag resolved my issue.

[iamvajid]

I am facing the same issue. But my script tags are before body only. I'm using sailsjs and when i view this file as starter.ejs through any route, this issue comes. But when i open the starter.html simply, this issue is not there. Issue is at app.js 151, says undefined.

[pheliperocha]

I had this too. Some script are interrupting. The script need to be the last one script to run. Move right before the closing body like Seany84 said.

[stringsanbu]

Adding for reference: I had this issue was well. Make sure none of your scripts are duplicated, I accidentally copied the JQuery 2.1.4 script in 2 different spots (made it harder to spot) and this caused the error.

[lfaire]

Make sure to require "jQuery-2.1.4.min" before adminlte app javascript. That's how I solved it.

[bchellingworth]

For anyone using Rails. I had added the jquery gem and also had jquery linked at the bottom of my application layout html. (I copied and pasted my old template :( )

Just make sure if you are using jquery gem you dont need to link jquery again.

removing the jquery link solved my problem.

[veerabiz1]

use app.js instead of app.min.js and remove the following code

$.AdminLTE = {};

/* --------------------

• - AdminLTE Options -

---

• Modify these options to suit your implementation
  */
  $.AdminLTE.options = {
  //Add slimscroll to navbar menus
  //This requires you to load the slimscroll plugin
  //in every page before app.js
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
  navbarMenuHeight: "200px", //The height of the inner menu
  //General animation speed for JS animated elements such as box collapse/expand and
  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
  //'fast', 'normal', or 'slow'
  animationSpeed: 500,
  //Sidebar push menu toggle button selector
  sidebarToggleSelector: "[data-toggle='offcanvas']",
  //Activate sidebar push menu
  sidebarPushMenu: true,
  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
  sidebarSlimScroll: true,
  //Enable sidebar expand on hover effect for sidebar mini
  //This option is forced to true if both the fixed layout and sidebar mini
  //are used together
  sidebarExpandOnHover: false,
  //BoxRefresh Plugin
  enableBoxRefresh: true,
  //Bootstrap.js tooltip
  enableBSToppltip: true,
  BSTooltipSelector: "[data-toggle='tooltip']",
  //Enable Fast Click. Fastclick.js creates a more
  //native touch experience with touch devices. If you
  //choose to enable the plugin, make sure you load the script
  //before AdminLTE's app.js
  enableFastclick: false,
  //Control Sidebar Options
  enableControlSidebar: true,
  controlSidebarOptions: {
  //Which button should trigger the open/close event
  toggleBtnSelector: "[data-toggle='control-sidebar']",
  //The sidebar selector
  selector: ".control-sidebar",
  //Enable slide over content
  slide: true
  },
  //Box Widget Plugin. Enable this plugin
  //to allow boxes to be collapsed and/or removed
  enableBoxWidget: true,
  //Box Widget plugin options
  boxWidgetOptions: {
  boxWidgetIcons: {
  //Collapse icon
  collapse: 'fa-minus',
  //Open icon
  open: 'fa-plus',
  //Remove icon
  remove: 'fa-times'
  },
  boxWidgetSelectors: {
  //Remove button selector
  remove: '[data-widget="remove"]',
  //Collapse button selector
  collapse: '[data-widget="collapse"]'
  }
  },
  //Direct Chat plugin options
  directChat: {
  //Enable direct chat by default
  enable: true,
  //The button to open and close the chat contacts pane
  contactToggleSelector: '[data-widget="chat-pane-toggle"]'
  },
  //Define the set of colors to use globally around the website
  colors: {
  lightBlue: "#3c8dbc",
  red: "#f56954",
  green: "#00a65a",
  aqua: "#00c0ef",
  yellow: "#f39c12",
  blue: "#0073b7",
  navy: "#001F3F",
  teal: "#39CCCC",
  olive: "#3D9970",
  lime: "#01FF70",
  orange: "#FF851B",
  fuchsia: "#F012BE",
  purple: "#8E24AA",
  maroon: "#D81B60",
  black: "#222222",
  gray: "#d2d6de"
  },
  //The standard screen sizes that bootstrap uses.
  //If you change these in the variables.less file, change
  //them here too.
  screenSizes: {
  xs: 480,
  sm: 768,
  md: 992,
  lg: 1200
  }
  };

paste the above code below

$(function () {
"use strict";

it works me

[deepaksaini143]

facing same problem

Copied and paste your solution but still have same problem

[diptidsheth]

I'm also facing same issue when I use following for print functionality in master page:

Left menus are not working .

[rjankathi]

Hi ,
Anybody tried AdminLTE with Angular ?
I tried initializing the sidebar push menu as below in one of my components. Everything is bundled in vendor.js in order 1. Jquery, 2. app.js

var o = $.AdminLTE.options;

    //Activate sidebar push menu
    if (o.sidebarPushMenu) {
        $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
    }

I get the following error
ORIGINAL EXCEPTION: Cannot read property 'options' of undefined.
I tried to check if it is even getting the AdminLTE object its undefined as well. How should I make it available to Jquery ($ ) any insight would help.
p.s When I click on hamburger it simply goes to home page
Update: I loaded them separately and it didnt help

[Phil795]

I had the same problem like @kaynewilder and the comment from @veerabiz1 solved this problem!

[wladneto]

I resolved! The app.min.js calls jquery automatically... if you call another jqyery you will the same problem.

[skyview059]

In my code I replace '$' with 'jQuery' and my problem solved

[brian-lamb-software-engineer]

I was having this problem with jQuery, having AdminLTE and Vue.js involved, in a Laravel framework. It was because i had the bootstrap.js loading too low on the chain, i had to move that to the top, before my vendors. .

[2root2]

Problem is most likely due to sequence of linking _app.js_, please load it after loading all JS files

[bdpadrino]

I delete in datatable.min.js the JQuery v3.3.1 to work with version that is already there in AdminLTE template

[shobhitk8055]

1. Where you are including scripts, use app.js instead of app.min.js
2. On line 144 remove $(function () { and on line 228 remove });
3. Done!!