Search code examples
jqueryaureliasystemjsselectize.js

using selectize.js with Aurelia and systemjs


I'm trying to use Selectize with aurelia and keep getting the error:

Uncaught (in promise) TypeError: $(...).selectize is not a function(…)

I have jquery being loaded via script tag in the index.html, and trying to load selectize in a simple component:

EventForm.html

<template>
    <div>
        <label for="eventTitle">Title</label>
        <input type="text" id="eventTitle">
    </div>
    <div>
        <label for="eventType">Sport</label>
        <select id="eventType">
            <option>Event 1</option>
            <option>Event 2</option>
            <option>Event 3</option>
        </select>
    </div>
</template>

EventForm.js

'use strict';
import 'jspm_packages/github/selectize/selectize.js@0.12.1/dist/js/standalone/selectize';

export class EventForm {
    constructor(){

    }

    attached() {
        $('#eventType').selectize({
            create: true,
            sortField: {
                field: 'text',
                direction: 'asc'
            },
            dropdownParent: 'body'
        });
    }
}

index.html

.
.
.
<script type="text/javascript" src="jspm_packages/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="jspm_packages/npm/jquery@2.2.1/dist/jquery.min.js"></script>
.
.
.

I have a feeling that this has more to do with systemjs loading, but have tried loading selectize in the index.html with the same results. Could someone help point out what I'm doing wrong? Using jquery 2.2.1

Thanks


Solution

  • About jquery: https://stackoverflow.com/a/34772020/3436921

    About selectize: just check the map in config.js for selectize, I suppose you need to import it like import "selectize" or import "selectize.js"