Uncaught TypeError: $(…).autocomplete is not a function

Question

I'm using the JQuery UI autocomplete for quite a few text fields on my Backbone.js project. The libraries are loaded in the correct order as follows,

define(['jquery','jquery-ui.min','jquery.ui.touch-punch']);

The autocomplete function gets called, like so:

$("#channelRspm").autocomplete({
 minLength: 3,
 delay: 1000,
 source: function(request, response) {
 var results = $.ui.autocomplete.filter(channel, request.term);
 response(results.slice(0, 10));
   }
});

The problem is that the autocomplete behavior is very random. When running the source on Chrome browser, sometimes it works flawlessly. However, sometimes I get the error in console :
Uncaught TypeError: $(...).autocomplete is not a function

Refreshing the html normally makes it work again but then, that is not what I want. Could anyone please suggest where I'm going worng?

Answer 1

You should make sure jquery-ui is loaded after jquery using shim .

require.config({
  paths: {
    "jquery": "lib/jquery",
    "jquery-ui": "lib/jquery-ui",
    "underscore": "lib/underscore",
    "backbone": "lib/backbone"
  },
  shim: {
    "underscore": {
        exports: "_"
    },
    "backbone": {
        exports: "Backbone",
        deps: ["underscore", "jquery"]
    },
    "jquery-ui": {
        exports: "$",
        deps: ['jquery']
    }
  }
});

You need to specify jquery-ui as dependency for jquery.ui.touch-punch in similar way.

then define your module like

define(['jquery','jquery-ui','jquery.ui.touch-punch']);