CODEWITHSUNDEEP
jqueryaureliasystemjsselectize.js
weagle08
weagle08

Reputation: 1964

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/[email protected]/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/[email protected]/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

Upvotes: 1

Views: 603

Answers (1)

valu
valu

Reputation: 1196

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"

Upvotes: 1

Related Questions