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

Question

I am getting JavaScript error:

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

I have loaded all JS on my view page in this order

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/bootstrap.min.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/jquery.cookie.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/imagesloaded.pkgd.min.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/jquery.lazyload.min.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/masonry.pkgd.min.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/jquery.placeholder.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/googleDirections.js"></script>
 <script type="text/javascript" src="/presents/shawnee/designs/javascripts/libs/scripts.js"></script>

Here is the affix code

// Sticky navbar desktop only 
$('#navbar-fixed').affix({
    offset: {
      top: function() {
        return (this.top = $('#masthead').outerHeight(true) + $('#navbar-fixed').height());
      }
    }
  })
// For a subpage called 'tools'. Creates sticky sidebar 
$('#tools-sticky-nav').affix({
  offset: {
    top: function() {
      return (this.top = $('#masthead').outerHeight(true))
    }
  }
})

actually in scripts.js file I have a function that uses affix functions from bootsrap.min.js file so and I have also loaded all the functions before the scripts.js file but it always gives me uncaught error. — user3906755, Mar 17 '16 at 12:34
Please [edit] your post to include any additional information you have to your question. Avoid adding this in the comments, as they are harder to read and can be deleted easier. The edit button for your post is just below the post's tags. — Kyll, Mar 17 '16 at 13:03
Are you sure `bootstrap.min.js` gets loaded correctly? Have you checked your network tab? — h2ooooooo, Mar 17 '16 at 13:10
@h2ooooooo yes because I have checked the view source page and found that it is loaded — user3906755, Mar 17 '16 at 13:10
I remember running into this kind of problem when resetting affix via ajax calls — mahatmanich, Mar 17 '16 at 13:11
also, is affix included in your bootstrap.min.js could it be that you did not include the plugin if you build a customized bootstrap.min.js file with limited resources? from here ... http://getbootstrap.com/customize — mahatmanich, Mar 17 '16 at 13:13
I would assume from the message that the affix plugin is not present in your bootstrap.min.js! — mahatmanich, Mar 17 '16 at 13:16
Further if affix is included, it could be a jQuery conflict issue, as such: http://stackoverflow.com/questions/15670352/typeerror-on-is-not-a-function — mahatmanich, Mar 17 '16 at 13:18
I have used this cdn https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js — user3906755, Mar 17 '16 at 13:20
When you said "I have checked the view source page and found that it is loaded" are you saying that you viewed the source and clicked the link to the JS file and it loaded? — j08691, Mar 17 '16 at 13:26
@j08691 yes, Apart from that I have also used the CDN link maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js to load the js. — user3906755, Mar 17 '16 at 13:33
you can also check the demo site http://shopshawneemall.red5demo.com/sales check it on firebug...!! — user3906755, Mar 17 '16 at 13:35
You're loading jQuery twice (2.2.0 and 1.7.1) - this might very well destroy your definition of `$` and reset it which is why `$.affix` does not exist (as 1.7.1 is loaded *after* you've loaded this file). If this is on purpose please read [Can I use multiple versions of jQuery on the same page?](http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page). — h2ooooooo, Mar 18 '16 at 09:48
update bootstrap.js to version 3.0 and it working [https://stackoverflow.com/a/44344544/1673050](https://stackoverflow.com/a/44344544/1673050) — Rain, Jun 03 '17 at 13:49

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

0 Answers0