Adding selectize.js (or probably any JS functionality) is throwing Type and Reference errors

mearleycf commented 6 years ago

I am using Pattern Lab Node- Gulp Edition v3.0.0-alpha.7 on Mac.

Expected Behavior

Adding a file (selectize.js) to source/js, adding a reference to ../js/selectize.js in head.mustache, and adding JS code to foot.mustache related to the jquery implementation of selectize.js, would allow the selectize.js function to work. https://github.com/selectize/selectize.js

Actual Behavior

If i don't include a script src reference for jquery in head.mustache, then I get the reference error: $ not defined. If I include a reference to jquery src in head.mustache, I stop getting that error, but start getting a different error, $(#select-beast).selectize is not a function.

My head:

<!DOCTYPE html>
<html class="{{ htmlClass }}">
  <head>
    <title>{{ title }}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
    <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
    <link rel="stylesheet" href="../../css/selectize.default.css?{{cacheBuster }}" media="all" />  
    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    {{{ patternLabHead }}}
    <!-- End Pattern Lab -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    <script src="../js/selectize.js"></script>
  </head>
  <body class="{{ bodyClass }} prg">

My foot:

  <!--DO NOT REMOVE-->
  {{{ patternLabFoot }}}

  <!--selectize -->

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
  $(function() {
      $('select').selectize(options);
  });
</script>
<!-- end selectize -->

  </body>
</html>

Errors:

TypeError: $('#select-beast').selectize is not a function. (In '$('#select-beast').selectize({
                    create: true,
                    sortField: {
                        field: 'text',
                        direction: 'asc'
                    },
                    dropdownParent: 'body'
                })', '$('#select-beast').selectize' is undefined)

ReferenceError: Can't find variable: options SyntaxError: Unexpected token '<'

Steps to Reproduce

download selectize.js. Copy .js to ./source/js/selectize.js. Copy .css to ./source/css/selectize.default.css. Add code as indicated above to head and foot mustache files.

bmuenzenmeyer commented 6 years ago

Responded via https://stackoverflow.com/questions/48811896/adding-selectize-js-to-patternlab-io-implementation

mearleycf commented 6 years ago

I'll chat with you here b/c I can put code and such more easily here. So here is my head.mustache. I'm confused, because I thought Pattern Lab included jQuery by defualt, but I'm getting reference error: variable not defined $ if I don't include a script src for jquery.

<!DOCTYPE html>
<html class="{{ htmlClass }}">
  <head>
    <title>{{ title }}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
    <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
    <link rel="stylesheet" href="../../css/selectize.default.css?{{cacheBuster }}" media="all" />  
    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    {{{ patternLabHead }}}
    <!-- End Pattern Lab -->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">-->
    <script src="../../js/selectize.js"></script>
  </head>
  <body class="{{ bodyClass }} prg">

bmuenzenmeyer commented 6 years ago

I'm confused, because I thought Pattern Lab included jQuery by defualt

curious what gives you this idea? Using Pattern Lab in the frontend is different than your patterns - since they operate in isolated iframes

pattern-lab / edition-node-gulp