Uncaught TypeError: undefined is not a function (jQuery & jQuery UI)
I am trying to use the jQuery UI autocomplete widget but I'm getting the following error in Google Chrome:
Uncaught TypeError: undefined is not a function jquery-ui.min.js:7
e.widget.refresh jquery-ui.min.js:7
(anonymous function) jquery-ui.min.js:6
e.widget._create jquery-ui.min.js:6
(anonymous function) jquery-ui.min.js:6
e.Widget._createWidget jquery-ui.min.js:6
e.(anonymous function).(anonymous function) jquery-ui.min.js:6
(anonymous function) jquery-ui.min.js:6
n.extend.each jquery-2.1.1.min.js:2
n.fn.n.each jquery-2.1.1.min.js:2
e.fn.(anonymous function) jquery-ui.min.js:6
e.widget._create jquery-ui.min.js:7
(anonymous function) jquery-ui.min.js:6
e.Widget._createWidget jquery-ui.min.js:6
e.(anonymous function).(anonymous function) jquery-ui.min.js:6
(anonymous function) jquery-ui.min.js:6
n.extend.each jquery-2.1.1.min.js:2
n.fn.n.each jquery-2.1.1.min.js:2
e.fn.(anonymous function) jquery-ui.min.js:6
(anonymous function) create:684
j jquery-2.1.1.min.js:2
k.fireWith jquery-2.1.1.min.js:2
n.extend.ready jquery-2.1.1.min.js:2
I jquery-2.1.1.min.js:2
I include jQuery and jQuery UI in the header like so:
<head>
<meta charset="utf-8">
<title>Client DB</title>
<link href="/css/styles.css" rel="stylesheet" />
<link href="/css/selectize.default.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/selectize.min.js"></script>
<script src="/js/autogrow.js"></script>
<script src="/js/jquery.mattni.cloner-0.1.js"></script>
<script src="/js/filter-years.js"></script>
<script src="/js/jquery.filter.js"></script>
</head>
I then call the function at the end of my HTML like so (I've replaced some information which is sensitive to the client):
<script>
$(function(){
console.log("You autocomplete me");
var availableTags = ["Autofill 1","Autofill 2"];
$("#ref").autocomplete({source: availableTags});
$("#basis").autocomplete({source: ["Choice 1", "Choice 2"]});
$("#brand").autocomplete({source: ["Possible option", "Unladen swallow"]});
});
</script>
This worked at one point and now suddenly it is now. I have scoured the web looking for anyone having the same issue. I can only find examples of people receiving one or two errors, not a long list like this. I get the same errors if I link to jQuery and jQuery UI on Google, so I know it's not an issue with the files.
Has anyone seen these errors before or know how to fix them?
Answer
I found that it was a naming conflict in the jQuery list filtering plugin I was using ("jquery.filter.js"). I commented out the filter library and it resolved the issues.