It's No Use.

I have been searching for a clue to this problem most of the day. I am trying to use jquery auto complete in a mvc-5 project. I am getting an error that says "Uncaught TypeError: undefined is not a function".

I have been working on the premise that I must have some kind of file version conflict as most of the posts I have googled have suggested on this kind of error. I tried linking directly to jquery.com and still the same problem.
AutoComplete0.jpg
So I decided to try just doing a simple html page with a hard coded data source and voila!!! autocomplete works as expected.
AutoComplete1.jpg
Another thing I can't seem to find any information on is the selector in the autocomplete function gets grayed out on the  index.cshtml page. Hovering over it, the tool tip says "Can't find usage of id". I think this may be at the root of the undefined problem, but I can't see or find what to do about it.
AutoComplete2.jpg
 I don't have any issues on the html page.

Has anyone seen this kind of thing before or have any suggestions for trouble shooting or fixing?
Thanks
wdarnellgAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CamilliaCommented:
I have been working on the premise that I must have some kind of file version conflict as most of the posts I have googled have suggested on this kind of error.

In your first screenshot, click on "script" and what jQuery libraries do you see? See if jQuery is loaded.

If you post the link, if you can, those who know jQuery best can help better.
wdarnellgAuthor Commented:
The jquery files seem to be loading. No 404 errors in Chrome Debugger. Just the same Undefined is not function on the mvc view, but no errors at all with the html page.

Here are the links:
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
CamilliaCommented:
I see you have $(function)

I think you need  $(document).ready(function () {...}
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

wdarnellgAuthor Commented:
The expanded error message below:

Index:42 Uncaught TypeError: undefined is not a function    Index:42
(anonymous function)        jquery-2.1.3.js:3094
jQuery.Callbacks.fire           jquery-2.1.3.js:3206
jQuery.Callbacks.self.fire        Withjquery-2.1.3.js:3412
jQuery.extend.ready              jquery-2.1.3.js:3428 completed
wdarnellgAuthor Commented:
@Camillia,
Adding Doc.ready got me the following screens:

VS Studio
Add Doc.Ready
G Chrome
G Chrome
wdarnellgAuthor Commented:
Note above that #txtPlayer is still grayed out on both the script and div blocks.
CamilliaCommented:
I once had to add "name" because "id" wasn't enough. Have you tried adding name = "txtPlayer"

What's the difference between your actual MVC code and the test page you did and said it's working? have you compared them?
wdarnellgAuthor Commented:
The only difference in the code is that the html page has hard coded data source and the mvc code is seeking a database table for the source. Also, the way the code is placed in the <head> and the <body>.

html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script>
        $(function() {
            var availableTutorials = [
                "ActionScript",
                "Bootstrap",
                "SeeSharp",
                "SeePlusPlus"
            ];
            $("#autocomplete-1").autocomplete({
                source: availableTutorials
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="autocomplete-1">Tags: </label>
        <input id="autocomplete-1" />
    </div>
</body>
</html>

Open in new window


The cshtml Code:
<link href="~/Content/jquery-ui.min.css" rel="stylesheet"/>
@*<script>
    $m = jQuery.noConflict();
</script>*@
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function() {
        $("#txtPlayer").autocomplete({
            source: '@Url.Action("GetPlayer")'
        });
    });
</script>


@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h3>Auto Complete Project</h3>

    <div class="form-control">
        <input name="txtPlayer"/>
    </div>

</div>

Open in new window

    <script>
        $(function() {
            var availableTutorials = [
                "ActionScript",
                "Bootstrap",
                "SeeSharp",
                "SeePlusPlus"
            ];
            $("#autocomplete-1").autocomplete({
                source: availableTutorials
            });
        });
    </script>

Open in new window

wdarnellgAuthor Commented:
I tried using NAME just now, and no go. The error is the same and #txtPlayer is still grayed out in the function, although not with the element.
    <script>
        $(function() {
            var availableTutorials = [
                "ActionScript",
                "Bootstrap",
                "SeeSharp",
                "SeePlusPlus"
            ];
            $("#autocomplete-1").autocomplete({
                source: availableTutorials
            });
        });
    </script>

Open in new window

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script>
        $(function() {
            var availableTutorials = [
                "ActionScript",
                "Bootstrap",
                "SeeSharp",
                "SeePlusPlus"
            ];
            $("#autocomplete-1").autocomplete({
                source: availableTutorials
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="autocomplete-1">Tags: </label>
        <input id="autocomplete-1" />
    </div>
</body>
</html>

Open in new window

<link href="~/Content/jquery-ui.min.css" rel="stylesheet"/>
@*<script>
    $m = jQuery.noConflict();
</script>*@
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function() {
        $("#txtPlayer").autocomplete({
            source: '@Url.Action("GetPlayer")'
        });
    });
</script>


@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h3>Auto Complete Project</h3>

    <div class="form-control">
        <input name="txtPlayer"/>
    </div>

</div>

Open in new window

Brian TaoSenior Business Solutions ConsultantCommented:
Can you try also adding the html, head and body tags in your cshtml, and put the script tag (and the $(document).ready(....)) in the head section?  The <input> has not been loaded when the browser reaches the $("#txtPlayer").autocomplete line, if you put them in the body. (if you don't have <head> and <body>, the browser assumes that everything is in the <body> tag.

Note: don't forget to change the name="txtPlayer" back to id="txtPlayer" otherwise it won't work either because $("#txtPlayer") only qualifies an id and not a name attribute.

And if you can't add those tags (sorry, I know nothing about mvc-5).  Move those <script> tags to the bottom of your code.
Chris StanyonWebDevCommented:
Hey wdarnellg,

Couple of things of note here.

In the source of your cshtml above you seem to be putting jQuery into noConflict mode and re-assigning the jQuery object to $m, so you may need to call the document ready using that (or the full name)

As a test, I would use a hard-coded datasource in your page - at least that way you can identify where the problem is - my thinking is that it's with the datasource - not the selector.

Try something like this and see how you get on:

jQuery(document).ready(function($) {
   $("#txtPlayer").autocomplete({
      source: [ 'Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo' ]
   });
});

Open in new window


@Brian - you don't need to move the script - the document.ready block takes care of checking that everything's loaded.
wdarnellgAuthor Commented:
Ok, I found the fix at this SO post.. In a nutshell, I didn't have my references in order after all, and I had to relocate some @Script renders to the head of my _Layout view that mvc placed in the body by default. I also was able to fix the #selector issue by adding a <label for="txtPlayer"> to the html. Seems odd, but it worked.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wdarnellgAuthor Commented:
@Chris,
That no conflict code didn't work and was commented out. Thanks.
wdarnellgAuthor Commented:
The solution was actually from a post at Stack Overflow.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.