Twitter Bootstrap Question posted in

Why do I keep getting $(…).scrollSpy is undefined?-Twitter bootstrap

I am using bootstrap 4.3.1
popper 1.10.1 and jquery 3.4.1

loaded in the order of
popper
jquery
bootstrap

But using data-spy=”scroll” in combination with a target doesnt work, and calling the scrollSpy function myself produces the error:
TypeError: $(...).scrollSpy is not a function

I tried using that data attribute as well as using the manual function. I tried swapping out bootstrap and jquery functions, load errors, pasting the scrollSpy code from twitter bootstrap (which did nothing)

<div class="timeline" id="timeline-spy" data-spy="scroll" data-target="#timeline-wrapper">
            <nav class="timeline-nav__wrapper" id="timeline-wrapper">
                <ul class="timeline-nav">
                  ... (list items)
                </ul>
            </nav>
</div>

I expect scrollspy to work the way it is described and not throw the TypeError: $(...).scrollSpy is not a function error, or just for the data-attribute method to work.

Edit

All the libraries i load: (It’s symfony code but you should be able to tell)

{{ encore_entry_link_tags('app') }}
<link rel="stylesheet" href="{{ asset('/css/selectize.min.css') }}">
<link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
<link rel="stylesheet" href="{{ asset('/css/rpg-icons/css/rpg-awesome.min.css') }}">

<script src="{{ asset('/js/popper.min.js') }}"></script>
<script src="{{ asset('/js/jquery.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/perfect-scrollbar.js') }}"></script>
<script src="{{ asset('/js/selectize.min.js') }}"></script>
<script src="{{ asset('/js/clamp.min.js') }}"></script>
<script src="{{ asset('/theme/light/sb-admin-2.min.js') }}"></script>
{{ encore_entry_script_tags('app') }}
<script src="{{ asset('/js/toast.min.js') }}"></script>
<script src="{{ asset('/build/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('js/vue.min.js') }}"></script>

Note: They are all in the of the html file because i’m using turbolinks.

In the picture below you can see that none of the jquery gets overwritten and that the load order is quite correct. The app.js consists of a small amount of js, so it’s not reloading jquery there or anything like that.

Loading order

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The $(...).scrollSpy() never resolved it self. However, when playing around with some codepens i figured out how to fix the data related one. For me, what fixed it was adding the class 'nav' to the tag. So it functions properly now.


  2. 0

    Bootstrap has two dependencies: jQuery 1.9.1 and popper.js 1.12.3. When you install Bootstrap, you need to install these two dependencies.

    In Angular:

    Install popper.js npm install popper.js@^1.12.3 --save

    Install jQuery: npm install [email protected] --save

    Install Bootstrap: npm install [email protected] --save

    If you’re using latest version of bootstrap(4.1+) then

    For Bootstrap 4.1

    npm install popper.js@^1.14.3 --save

npm install [email protected] --save

npm install [email protected] --save

    then just add the package to the scripts in angular.json – the same way you include other js files, but Popper.min.js should be before Bootstrap.min.js

    In HTML:

    include popper.js before Bootstrap js file and the Scrollspy should work just fine. CDN Link: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search