How to include and use jQuery in Aurelia using Aurelia CLI and Semantic UI in a right way?

Question

We are working on a project using Aurelia, Aurelia CLI, jQuery and Semantic UI.

Currently, we have the following lines included in the head section of index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

We have a navigation bar where one element is a drop-down menu offered by Semantic UI:

  <div id="navbar_account" class="ui dropdown item navbar text" if.bind="connector.loggedIn">
    Dropdown menu
    <i class="left dropdown icon"></i>
    <div class="menu">
      <a class="item" click.delegate="">My account</a>
      <a class="item" click.delegate="">Logout</a>
    </div>
  </div>

In order to make it usable we are adding this code to corresponding js file:

  attached() {
    $('.ui.dropdown').dropdown();
  }

The problem is, this code doesn't seem to work when the website or page is opened the first time. Only when we click on some other nav-bar link, then this drop-down menu starts to work.

It feels like, something is being activated not in the right order. Maybe we are importing jQuery not in a right way or we don't active it correctly. Maybe it's a problem with Semantic UI.

All my trials to add jQuery as a dependency or as a prepend to Aurelia CLI projector ( aurelia.json ) were not successful.

In one of the latest trials, I run:

npm install jquery --save
npm install github:components/jqueryui#1.12.1 --save

Added to aurelia.json :

        "prepend": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/components-jqueryui/jquery-ui.min.js",
           ...

Added to index.html :

<link rel="stylesheet" href="node_modules/components-jqueryui/themes/base/all.css">

With this steps, I made the Aurelia project not runnable anymore with au run –watch

{ Error: Cannot find module 'gulp'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Promise (D:\gitkraken\ad\aurelia\node_modules\aurelia-cli\lib\commands\gulp.js:19:20)
    at new Promise (<anonymous>)
    at module.exports.execute (D:\gitkraken\ad\aurelia\node_modules\aurelia-cli\lib\commands\gulp.js:18:12)
    at _establishProject.then.then (D:\gitkraken\ad\aurelia\node_modules\aurelia-cli\lib\cli.js:36:24)
    at <anonymous> code: 'MODULE_NOT_FOUND' }

Answer 1

Where you do this:

attached() {
  $('.ui.dropdown').dropdown();
}

You'll want to inject the TaskQueue component in that element and wrap this in a queueMicroTask call like so:

attached() {
  this.taskQueue.queueMicroTask(() => {
    $('.ui.dropdown').dropdown();
  });
}

This ensures everything is fully rendered before the jQuery call. It's generally the recommended way to integrate with 3rd party UI components.

As for the other problem: I'm surprised you get an error regarding gulp when you prepend jquery to your vendor bundle. These problems are hard to troubleshoot without seeing your complete aurelia.json (and possibly package.json).

Without jquery

And lastly, you may want to consider not using jQuery / jQuery UI or Semantic UI's javascript. I personally only use the CSS and build the component behaviors myself with Aurelia because Aurelia makes it so easy with delegates and bindings.

I can highly recommend you try it. It will make you better with HTML/CSS/JavaScript/Aurelia and you get higher quality projects + stuff you can reuse across projects. Plus never any need to drag in those problematic dependencies.

Example:

<div id="navbar_account" class="ui dropdown item navbar text">
  Dropdown menu
  <i class="left dropdown icon" click.delegate="showDropdown = !showDropdown"></i>
  <div class="menu" show.bind="showDropdown">
    <a class="item">My account</a>
    <a class="item">Logout</a>
  </div>
</div>

And that's all there is to making something show/hide on click!