Search code examples
javascriptjqueryaureliaadminlte

Using Admin LTE with Aurelia

I have an Aurelia CLI application and I also installed admin-lte with npm. The problem is that it doesn't load correctly. This is because Admin LTE uses jQuery DOM ready event and expects things to be in the DOM at that moment. But if I declare all layout html in my app.html nothing happens because things are attached later (my guess).

I've created a gist that simulates the problem. I guess I could use attached hook in app.js and do something but I'm not sure of what.

https://gist.run/?id=e4521c1fb38ec82bffd6a0e4fd8b1da6

As you can see, plugin.js is referenced in index.html just like I reference the Admin LTE javascripts in my application. The div does not change because it arrives after the script in plugin.js runs.

This is the body of my real app:

<body aurelia-app="main" class="hold-transition skin-blue sidebar-mini">
    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
    <!-- REQUIRED JS SCRIPTS -->

    <!-- jQuery 2.2.3 -->
    <script src="node_modules/admin-lte/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="node_modules/admin-lte/bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="node_modules/admin-lte/dist/js/app.js"></script>
  </body>

What I actually need is to make sure that the $(function () {...}) in admin-lte/dist/js/app.js runs. Maybe you could force jQuery to rerun this function?

Solution

  • In my app.js I could use the attached function and call a function to fix the layout:

    export class App {
    attached(){
        $.AdminLTE.layout.fix();
    }
}

    Found the information here