0

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?

Improve this question
4
  • 1
    Did you make any changes in the libraries you are using after which it stopped working and threw this error? Commented Jul 17, 2014 at 23:32
  • What is the version of jQueryUI you are using. Try changing it. Commented Jul 18, 2014 at 2:22
  • Please check for all the files you are including, are all they available. Make sure you are not getting 404 not found error for the files you are including ! Commented Jul 18, 2014 at 6:35
  • Here's a fiddle: jsfiddle.net/9LKAB using the versions specified in the question (ignore non-existent formatting and notice there's no script errors thrown). Most likely a compatibility/browser version issue; try running it with different versions, or if none work -- include non-minified library files and debug. Commented Jul 18, 2014 at 11:34

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Had the same issue. Turned out it was a plugin naming conflict as well. Thanks for sharing your findings.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.