I`m missing something small: Uncaught ReferenceError: $ is not defined(anonymous function)

Question

I`m trying to use the Materialize Framework and its seems that I cant run the autocomplete example. Something is missing here.

I'm importing jQuery before Materialize and I have tried even moving jQuery inside the < head >. If you have suggestions. I know its dumb but I just can't see it and it has passed over 40 minutes on a basic thing.

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>

<div class="row">

    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <i class="material-icons prefix">textsms</i>
                <input type="text" id="autocomplete-input" class="autocomplete">
                <label for="autocomplete-input">Autocomplete</label>

                <script>$('input.autocomplete').autocomplete({
                        data: {
                            "Apple": null,
                            "Microsoft": null,
                            "Google": 'http://placehold.it/250x250'
                        }
                    });
                </script>
            </div>
        </div>
    </div>
</div>


<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>

</body>
</html>

Thank you!

Move your code so it runs *after* you've loaded jQuery and Materialize. Scripts load in the order they're listed. — Mike Cluck, Aug 17 '16 at 19:56
Possible duplicate of [Uncaught ReferenceError: $ is not defined?](http://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — VLAZ, Aug 17 '16 at 19:56

score 5 · Answer 1 · answered Aug 17 '16 at 19:57

I think your problem is not with materialize, but with the

$('input.autocomplete').autocomplete({})

itself. You're trying to use $ before you actually import it.

You should move your own code to go after the jQuery and materialize import statements, so you can use $ in your own code and have jQuery available.

(Other answer says to move the scripts to the head tag. As far as I know, that's a bad practice and you should have all your js at the end of body tag)

Ok. I moved both jQuery and Materialized before the code and it returns the same error — Daniel, Aug 17 '16 at 20:01

score 0 · Answer 2 · answered Aug 17 '16 at 19:55

0

Move both script tags when you import libraries to the head element or put the script tag where you call autocomplete after the two aforementioned.

answered Aug 17 '16 at 19:55

mic4ael

7,974
3
29
42

i also mentioned that you should move your code after importing those libraries.. – mic4ael Aug 17 '16 at 19:59
It's generally considered bad advice to put scripts in the ``. Then the user has to wait for them to load before any of the page is visible and you have to wait for the DOM to be loaded in your code before working against it. Putting it at the bottom of the body alleviates both of those problems. – Mike Cluck Aug 17 '16 at 20:01

I`m missing something small: Uncaught ReferenceError: $ is not defined(anonymous function)

2 Answers2