1

I've set up a WAMP server on local computer. I am using bootstrap on the website. I have included jQuery version 2.2.4 from a CDN and bootstrap latest version from its CDN as well.

jQuery is getting loaded fine, but nothing related to bootstrap JS is working. I've tried calling its function $('#carousel').carousel(); from the console, but it gives the following error

TypeError: $(...).carousel is not a function

My code in the <head> tag is as follows:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.js"
        integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
        crossorigin="anonymous">
</script>
<!-- bootstrap.js -->
<script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I've read many Q/A's on SO regarding the exact same issue, but no answer helped me.

nvkrj
  • 1,002
  • 1
  • 7
  • 17

1 Answers1

1

Problem is you are using two versions of jQuery together, so there is a conflict.

Remove your CDN (both need to be removed)

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.4.js"
    integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
    crossorigin="anonymous">

    </script>

    <!-- bootstrap.js -->

    <script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

and try below CDN,

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Here you used jQuery version and bootstrap version are not compatible with each other. find the compatible version of bootstrap for the jQuery 2.2.4 or try wise versa.

If you want to keep two jQuery versions, try this

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Buddhika Alwis
  • 373
  • 14
  • 23
  • Your code is working! Thanks! Can you please specify how I was using two versions of jQuery together? I've included only jQuery 2.2.4 and bootstrap.js? – nvkrj Jan 08 '17 at 07:10
  • I have up-voted it. I want to know why my code was not working. How did I include two jQuery versions together? – nvkrj Jan 08 '17 at 07:14
  • The link you provided does not answer my question "How". My question is, when I had only one script tag pointing to jQuery 2.2.4, how was that causing two versions of jQuery to be loaded? Your link, on the other hand, explains "How to load two jQuery versions together". – nvkrj Jan 08 '17 at 07:16
  • I will accept your answer if it answers my full question. Your answer has provided me how to get the bootstrap JS working, but it does not explain how I was inadvertently loading two jQuery versions. – nvkrj Jan 08 '17 at 07:20
  • jquery-2.2.4.js is not compatible with the bootstrap.min.js (3.3.7). you have to use miner version of boostrap.js instead 3.3.7 – Buddhika Alwis Jan 08 '17 at 07:21
  • Ohk. So I was not using two different versions of jQuery. I was using the incorrect version of jQuery. Right? – nvkrj Jan 08 '17 at 07:23
  • yep , you are correct about that, please remove the comments previously you put, i removed mines. – Buddhika Alwis Jan 08 '17 at 07:25
  • Why remove comments? They are helpful in providing the other half of the answer to anyone who reads it. – nvkrj Jan 08 '17 at 07:27
  • Update: Your answer was actually incorrect. My bootstrap.js was not loading because I had specified `href` instead of `src` attribute in its script tag. But thanks for helping. There was not version problem. If I use my original code with `src` instead of `href` in script tag of bootstrap.js, it works fine. Anyway, thanks for helping. – nvkrj Jan 08 '17 at 07:33
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132610/discussion-between-nvj-and-buddhika-alwis). – nvkrj Jan 08 '17 at 07:38