simple jQuery autocomplete example not working in ASP.NET Application

Question

This thread is related to my previous thread (Using a forced suggestion mechanism using JavaScript and jQuery (ASP.NET MVC project)). But the problem I am experiencing is too big to place it in there.

I am trying to gte the simple jQuery autocomplete example (http://jqueryui.com/autocomplete/) to work in my ASP.NET NVC 4 webapp. I tried this:

@model PoliticiOnline.DTO.Question

@{
    ViewBag.Title = "Stel een vraag!";
}

<head>
    <link rel="stylesheet" href="~/Content/Questions.css" type="text/css" />

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    @Scripts.Render("~/bundles/jqueryval")


    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>

</head>

<h2>Stel een vraag!</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Vraag</legend>

        <div class="general-question">
            <div class="editor-label">
                @Html.LabelFor(model => model.GeneralQuestion, "Algemene Vraag")
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.GeneralQuestion, new{@class = "general-question-edit"})
                @Html.ValidationMessageFor(model => model.GeneralQuestion)
            </div>
        </div>

        <div class="geadresseerde-politici">
            @Html.Label("Politicus")
            @Html.DropDownListFor(model => model.PoliticianId, (SelectList)ViewBag.PolIds)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Explanation, "Extra Uitleg")
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Explanation, new{@class = "explanation-textarea-edit"})
            @Html.ValidationMessageFor(model => model.Explanation)
        </div>

        <p>
            <input type="submit" value="Indienen!" />
        </p>

        <label for="tags">Tags: </label>
        <input id="tags"/>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

It's just the autocompleting that is not working (I'm not yet trying to send it with the form, I just want the autocomplete to work).

When I start typing in the inputfield nothing happens, but it shoudl actually give suggestions.

What error are you getting on your browser console window? preferably when u type in — Aditya
– Aditya, Commented Apr 3, 2014 at 18:51
Hmm I get the following on page load: "Uncaught ReferenceError: Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: $ is not defined " — E. V. d. B.
– E. V. d. B., Commented Apr 3, 2014 at 18:55
You forgot to load jquery library or there is an error from the load source! — Aditya
– Aditya, Commented Apr 3, 2014 at 18:58
I thought this was enough: @Scripts.Render("~/bundles/jqueryval") What do I need to do? The jQuery bundle isn't corruptes because it works on another page (on which I also only do @Scripts.Render("~/bundles/jqueryval") ) — E. V. d. B.
– E. V. d. B., Commented Apr 3, 2014 at 19:00

Aditya · Accepted Answer · 2014-04-03 21:03:06Z

3

I am almost certain the error :

"Uncaught ReferenceError: Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: $ is not defined

means that jquery is not being loaded onto your page.

Load jquery from CDN or something like this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Try using:

 $(document).ready(function () { }

edited Apr 3, 2014 at 21:03

answered Apr 3, 2014 at 19:03

Aditya

4,4733 gold badges30 silver badges40 bronze badges

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

14 Comments

E. V. d. B. Over a year ago

If I put that line in <head> it doesn't solve it :( Weird thing is that I use jQuery on another page and it fully works. And I just do the @Render.Scripts... I am puzzled

E. V. d. B. Over a year ago

Oh my god I fixed the jQuery error!! I made some kind of type and said @Render.Scripts(~/bundles/jqueryval) which should just be jquery! Only error left is: Uncaught TypeError: Object [object Object] has no method 'autocomplete'

Aditya Over a year ago

Okay , then you must load the jquery UI library! <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

E. V. d. B. Over a year ago

Every js file is loaded but I still get the "Uncaught TypeError: Object [object Object] has no method 'autocomplete' " error

Aditya Over a year ago

Load all files after loading jquery file?

|

Collectives™ on Stack Overflow

simple jQuery autocomplete example not working in ASP.NET Application

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related