search

ColorlibHQ / AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5
https://adminlte.io
MIT License
43.9k stars 18.17k forks source link

Uncaught TypeError: Cannot read property 'activate' of undefined #288

Closed nicolas-besnard closed 9 years ago

nicolas-besnard commented 9 years ago

I got this error, not every time (which is strange), but it appears sometimes ... Didn't know why. Any idea ?

EDIT: I had to move this at the end of the file to make this error disappear.

kressly commented 9 years ago

This looks like a javascript error. You should load jquery before loading app.js And also check your other js libraries and their dependency.

almasaeed2010 commented 9 years ago

That's odd. I will look into it when I get a chance.

mikhailbartashevich commented 9 years ago

I'm using require.js and hsve seen this error as well. I've moved this code bellow after initialization of the functions and error disappeared. Please update the app.js if it is the correct solution.

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

mikhailbartashevich commented 9 years ago

The order is

/* BoxWidget

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

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

almasaeed2010 commented 9 years ago

@mikhailbartashevich I don't understand why would the BoxWidget.activate create problems but Layout.activate wouldn't. I need a little more details.

@nicolas-besnard are you also using RequireJS?

Thank you!

mikhailbartashevich commented 9 years ago

$.AdminLTE.layout.activate(); this string causes problems, I've just put the example of the ordering which allows me to boot the application. Without moving initialization block after the whole objects are declared runtime exception occurs.

nicolas-besnard commented 9 years ago

I'm using the Ruby on Rails pipeline On Sat 14 Mar 2015 at 05:26 Mikhail Bartashevich notifications@github.com wrote:

$.AdminLTE.layout.activate(); this string causes problems, I've just put the example of the ordering which allows me to boot the application. Without moving initialization block after the whole objects are declared runtime exception occurs.

— Reply to this email directly or view it on GitHub https://github.com/almasaeed2010/AdminLTE/issues/288#issuecomment-79920007 .

almasaeed2010 commented 9 years ago

I took a look at this. I wasn't able to regenerate the error no matter what I try. Try to replace your app.js with this file, which is just a modified copy of app.js, and test it with your libraries to see if the error still appears?

What I did basically was wrap all the implementation code into a namespace. I hope this works.

mikhailbartashevich commented 9 years ago

Hi, for me it is still not working... the initialization block is before the layout object. Seems that jquery dom ready event fires before all the js files are loaded and that causes the problem

almasaeed2010 commented 9 years ago

Do you think there is a better way than moving the implementation block to the bottom of the file?

mikhailbartashevich commented 9 years ago

you can actually check if the object is initialized before calling activate and wrap initialization of the object into a function something like this

function initLayout() { $.AdminLTE.layout = { //init goes here} }

$(function() { if( !$.AdminLTE.layout ) { initLayout(); } $.AdminLTE.layout.activate();

})

almasaeed2010 commented 9 years ago

Won't this cause duplicate code?

mikhailbartashevich commented 9 years ago

Well, first of all there shouldn't be race conditions in the code. Regarding duplicating checks I would say yes there can be overhead in some other cases, if the issue appears again.

mikhailbartashevich commented 9 years ago

BTW, I've checked this solution and then $.AdminLTE.tree becomes undefined, so it will better be to wrap all the objects into this init function and call in the beginning of the Implementation block

almasaeed2010 commented 9 years ago

Ok so I updated the code to implement an _init function to make initiating the object synchronous with the code implementation. Check it out please and let me know

mikhailbartashevich commented 9 years ago

Hi, yes it works. It would be great if you update bower version after the fix is applied as well. Thanks.

almasaeed2010 commented 9 years ago

Fixed.

wonderer007 commented 9 years ago

I also got similar error but when i load jquery before app.js it resolved and this issue come up

//Activate Bootstrap tooltip if (o.enableBSToppltip) { $(o.BSTooltipSelector).tooltip(); }

Please guide me Thanks

Davidpsj commented 7 years ago

Hi!

When I implemented a base controller with $controller service passing {$scope: $scope} object to $controller, the jQuery.AdminLTE.layout.activate() return TypeError: undefined is not an object, on unit test using karma + jasmine. See the testSpec file below

`describe('Testing Base Controller', function(){ beforeEach(module('app'));

var base;
var $controller, $scope, $rootScope, $animate, $state, $stateParams, $sanitize, $filter, $q, $resource, $uibModal,
    toastr, EventHandler, LogService, StorageService, storage, PermissionsService,
    LanguageResource, LoadingService, StcpUtilsService, DAOService, ConstFactory, ShortcutService, RvPDFMaker, SkinService;

describe('Injecting dependencies to BaseController', function() {

    beforeEach(inject(function(_$controller_, _$rootScope_, _$animate_, _$state_, _$stateParams_, _$sanitize_, _$filter_, _$q_, _$resource_, _$uibModal_,
        _toastr_, _EventHandler_, _LoginService_, _LogService_, _StorageService_, _storage_, _PermissionsService_,
        _LanguageResource_, _LoadingService_, _StcpUtilsService_, _DAOService_, _ConstFactory_, _ShortcutService_, _RvPDFMaker_, _SkinService_
        ){

        $controller = _$controller_;
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();
        $animate = _$animate_;
        $state = _$state_;
        $stateParams = _$stateParams_;
        $sanitize = _$sanitize_;
        $filter = _$filter_;
        $q = _$q_;
        $resource = _$resource_;
        $uibModal = _$uibModal_;
        toastr = _toastr_;
        EventHandler = _EventHandler_;
        LogService = _LogService_;
        StorageService = _StorageService_;
        storage = _storage_;
        PermissionsService = _PermissionsService_;
        LanguageResource = _LanguageResource_;
        LoadingService = _LoadingService_;
        StcpUtilsService = _StcpUtilsService_;
        DAOService = _DAOService_;
        ConstFactory = _ConstFactory_;
        ShortcutService = _ShortcutService_;
        RvPDFMaker = _RvPDFMaker_;
        SkinService = _SkinService_;

        base = $controller('BaseController', { $scope: $scope });

    }));

    it('base should be defined', function(){ expect(base).toBeDefined(); });
})

});`

in karma.conf.js: `module.exports = function(config) { config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
        '../../assets/bower_components/jquery/dist/jquery.min.js',
        '../../assets/bower_components/tether/dist/js/tether.min.js',
        '../../assets/bower_components/angular/angular.js',
        '../../assets/bower_components/angular-mocks/angular-mocks.js',
        '../../assets/dist/js/app.js',
        '../../assets/bower_components/angular-animate/angular-animate.js',
        [...]
       })

}`

I dont understand why AdminLTE.layout.activate is undefined on test run, because the sequence of files in karma.conf.js is ok!

almasaeed2010 commented 7 years ago

@Davidpsj make sure you also have bootstrap.js loaded before app.js.

Davidpsj commented 7 years ago

@almasaeed2010 I put the app.js in last karma files list, but the issue continue:

files: [ '../../assets/bower_components/jquery/dist/jquery.min.js', '../../assets/bower_components/tether/dist/js/tether.min.js', '../../assets/bower_components/angular/angular.js', '../../assets/bower_components/angular-mocks/angular-mocks.js', '../../assets/bower_components/angular-animate/angular-animate.js', '../../assets/bower_components/pdfmake/build/pdfmake.min.js', '../../assets/bower_components/pdfmake/build/vfs_fonts.js', '../../assets/bower_components/angular-loader/angular-loader.min.js', '../../assets/bower_components/angular-animate/angular-animate.min.js', '../../assets/bower_components/bootstrap/dist/js/bootstrap.min.js', '../../assets/bower_components/angular-bootstrap/ui-bootstrap.min.js', '../../assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js', '../../assets/bower_components/angular-ui-select/dist/select.min.js', '../../vendors/moment/min/moment-with-locales.min.js', '../../vendors/moment/locale/pt-br.js', '../../vendors/moment/locale/es.js', '../../vendors/moment/locale/en-gb.js', '../../assets/bower_components/angular-toastr/dist/angular-toastr.min.js', '../../assets/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js', '../../assets/bower_components/chart.js/dist/Chart.js', '../../assets/bower_components/angular-chart.js/dist/angular-chart.js', '../../assets/bower_components/angular-cookies/angular-cookies.js', '../../assets/bower_components/ng-switcher/dist/ng-switcher.min.js', '../../assets/bower_components/angular-ui-switch/angular-ui-switch.js', '../../assets/bower_components/angular-ui-router/release/angular-ui-router.js', '../../assets/bower_components/angular-route/angular-route.js', '../../assets/bower_components/angular-resource/angular-resource.js', '../../assets/bower_components/angular-utils-pagination/dirPagination.js', '../../assets/bower_components/checklist-model/checklist-model.js', '../../assets/bower_components/bootstrap/js/collapse.js', '../../assets/bower_components/angular-loading-bar/build/loading-bar.min.js', '../../assets/bower_components/angular-sanitize/angular-sanitize.min.js', '../../assets/bower_components/angular-cookies/angular-cookies.min.js', '../../assets/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js', '../../assets/bower_components/angular-bootstrap-datetimepicker-directive/angular-bootstrap-datetimepicker-directive.js', '../../assets/bower_components/querystring/querystring.js', '../../assets/bower_components/alasql/dist/alasql.min.js', '../../assets/bower_components/js-xlsx/dist/xlsx.full.min.js', '../../vendors/angular-bootstrap-rv-checkbox/angular-bootstrap-rv-checkbox.js', '../../vendors/icheck/icheck.min.js', '../../vendors/ng-breadcrumbs/dist/ng-breadcrumbs.min.js', '../../assets/bower_components/angular-ui-mask/dist/mask.min.js', '../../js/**/*.js', '../../assets/dist/js/app.js', '../../js/test/unit/*.Spec.js' ],

almasaeed2010 commented 7 years ago

Try looking at the console and network to make sure everything has been loaded

Davidpsj commented 7 years ago

Yes all files has been loaded on window karma files for (var file in window.__karma__.files) { console.log(file) }

output:

PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: '/base/unit/testBaseController.Spec.js' PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: '/base/unit/testPermissionsService.Spec.js' PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: '/base/unit/testStcpUtilsService.Spec.js' PhantomJS 2.1.1 (Windows 8 0.0.0) LOG: '/absoluteC:/Users/david/Documents/Desenv/DefaultCollection/ProjectWeb/app/assets/dist/js/app.js'

Davidpsj commented 7 years ago

@almasaeed2010 Any suggestion!?

Davidpsj commented 7 years ago

@almasaeed2010 I found a solution: should be invoked _init() on service method to initialize AdminLTE object, after that, the unit test runs correctly. function AdminLTEfixLayout(){ /* Initialize AdminLTE object.*/ _init(); /* FIX.: Layout activate to fix layout cut off issue. */ jQuery.AdminLTE.layout.activate(); }

Thanks for the help!