Aurelia cannot find jQuery UI components

Question

I've post the solution down below. I'm open to suggestions on how to improve though, so, please don't hesitate to suggest a better way!

I'm using Aurelia CLI for my web-app. I'm trying to use jQuery tabs and jQuery datepicker, but nothing works

I've got a demo on gitHub here where all you have to do is clone, then run

npm install; au run

I'm using the example provided in this StackOverflow question How to use JQuery UI components in Aurelia getting started app (navigation app)

If you look in src/routes/tabs you'll see I'm including I'm including jQuery by using

import $ from 'jquery';
import {tabs} from 'jquery-ui';

In my aurelia.json, I'm including jquery and jquery-ui via the lines

"dependencies": [
  "jquery",
  "jquery-ui"
]

If I change the the import to

"jquery",
{
  "name": "jquery-ui",
  "path": "../node_modules/jquery-ui",
  "main": "jquery-ui"
  "deps": ["jquery"],
  "exports": "$"
}

I still get no error. The code just does nothing.

I suspect the root cause is a configuration issue, but any help would be super appreciated!

You're missing a comma after `"main": "jquery-ui"`. Maybe that's it? — LStarky, Jan 10 '17 at 01:44
oh, sorry, that's a copy paste error :-( if you miss a comma, or add an extra comman, the `au` command will blow a bunch of errors — Kearney Taaffe, Jan 10 '17 at 03:05
Please see my answer here: http://stackoverflow.com/questions/40837505/how-to-use-jquery-ui-with-aurelia — Josh Painter, Jan 18 '17 at 04:09

score 1 · Answer 1 · answered Jan 10 '17 at 10:38

Here's what I did to solve the problem.

Modify aurelia/aurelia.json to include the jquery. Then, load the jquery-ui plugin you want, and give jquery as a dependency. Also, load in the CSS for it

"jquery",
{
  "name": "jquery-ui-datepicker",
  "path": "../node_modules/jquery-ui/",
  "main": "ui/widgets/datepicker",
  "dep": ["jquery"],
  "exports": "$",
  "resources": [
    "themes/base/datepicker.css",
    "themes/base/theme.css"
  ]
}

Then in my view, I had to add this code

<!-- the view.html -->
<input datepicker value.bind="dateSelected">
<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

Then, I had to use a customAttribute to listen for jQuery's onchange() event

<!-- the view.html -->
<require from="./datepicker"></require>

The code to listen for jQuery's onchange() event

// datepicker.js
import {inject, customAttribute} from 'aurelia-framework';

@customAttribute('datepicker')
@inject(Element)
export class DatePicker {
  constructor(element) {
    this.element = element;
  }

  attached() {
    $(this.element).datepicker()
      .on('change', e => fireEvent(e.target, 'input'));

  }

  detached() {
    $(this.element).datepicker('destroy')
      .off('change');
  }
}

function createEvent(name) {
  var event = document.createEvent('Event');
  event.initEvent(name, true, true);
  return event;
}

function fireEvent(element, name) {
  var event = createEvent(name);
  element.dispatchEvent(event);
}

Here's a link to the github solution. If there's a better way to do it, I'm open to suggestions.

Aurelia cannot find jQuery UI components

1 Answers1