Include 1 library from jquery-ui in main.js

sage
1

I want to use autocomplete.js in my theme. I can add autocomplete.js easily enough to the final main.js but it doesn’t work. I’ve tried adding the core too but the same result.

Is this the right way to be doing this and if not what is the best method? Any help appreciated.

(I’ve read the docs and searched extensively)

the bower.json

 "dependencies": {
    "jquery": "~2.1.4",
    "waypoints": "jquery-waypoints#^4.0.0",
    "jquery-ui": "^1.11.4"
  },
  "overrides": {
    "waypoints": {
      "main": [
        "./lib/jquery.waypoints.min.js"
      ]
    },
    "jquery-ui": {
      "main": [
        "./ui/core.js",
        "./ui/autocomplete.js"
      ]
    }
  },

error is -
main.js:6:9516
TypeError: e.widget is not a function. (In ‘e.widget’, ‘e.widget’ is undefined)
return e.widget(“ui.autocomplete”, {

2

How and where are you invoking it?

3

Hey cfx, in

var Sage = {
    // All pages
    'common': {  ...etc
 ...finalize: function() {
    // JavaScript to be fired on all pages, after page specific JS is fired

 var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];

  $(".search-field").autocomplete({
    source: availableTags
  }); ...

It works if i include the whole jQuery-ui.js

D.

4

That’s because your overrides are omitting several autocomplete dependencies.

5

ok - isn’t this what this is for?

“./ui/core.js”,

6

Did you check the dependencies in the link above? Core is only one dependency.

7

ah ha!

I see. I always have so much trouble with adding scripts to this workflow that i always presume i’ve done it in the wrong file or place.

This now works so thanks for your patience.

 "overrides": {
    "waypoints": {
      "main": [
        "./lib/jquery.waypoints.min.js"
      ]
    },
    "jquery-ui": {
      "main": [
        "./ui/core.js",
        "./ui/widget.js",
        "./ui/position.js",
        "./ui/menu.js",
        "./ui/autocomplete.js"
      ]
    }
  },
8

Sure thing glad you got it :+1: