Materialize: Uncaught TypeError: $(...).scrollSpy is not a function

Question

I am using the Materialize framework, and for the life of me can not figure out why the scrollspy plugin is not working for me. My markup or css certainly isn't the issue - I'm certain it's right.

Console is showing:

Uncaught TypeError: $(...).scrollSpy is not a function

And references the line where I initialize the plugin:

$( document ).ready(function() {
    $('.scrollspy').scrollSpy();
});

I was under the impression that the plugin "came with" materialize's JS, but even when I include scrollspy.js myself in my header, I'm still getting the error.

What am I missing?

Is the <script> tag for materialize/scrollspy below the <script> tag for jQuery? — Sam
If $ refers to jQuery, and so it isn't your issue, you are maybe loading jQuery more than once — A. Wolff

dongle dongle · Accepted Answer · 2016-01-04T15:07:37

I'm totally blind – @A.Wolff was right – I'd mistakenly loaded jQuery (different versions at that) twice.

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=.9">
  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <link rel="stylesheet" href="{{site.baseurl}}/css/custom.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <!-- Compiled and minified CSS -->
<!--   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
 -->
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- google font -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800,600,400italic,800italic' rel='stylesheet' type='text/css'>

  <!-- scrollspy -->
  <script type="{{site.baseurl}}/js/scrollspy.js"></script>

  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- custom js -->
  <script src="{{site.baseurl}}/js/nav.js"></script>

  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
</head>

Materialize: Uncaught TypeError: $(...).scrollSpy is not a function

1 Answers