Bootstrap - “Uncaught TypeError: undefined is not a function”

Question

A problem that many people have had, but I can't figure it out.

I get the following error in Chrome Developer Tools:

Uncaught TypeError: undefined is not a function ----- bootstrapwizard.js:3

(anonymous function) ----- jquery-1.11.2.min.js:2

m.Callbacks.j ----- jquery-1.11.2.min.js:2

m.Callbacks.k.fireWith ----- jquery-1.11.2.min.js:2

m.extend.ready ----- jquery-1.11.2.min.js:2 J

I have tried the following:

1) Moving the script into a own js-file

2) Replacing where I include "jQuery", "Bootstrap" and "script"

3) Searching for online solutions

Could you please help me to solve this problem?

Thanks

The page can be found here. Its on Norwegian, but the bar is on English.

Header

 <!-- jQuery --->
        <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.11.2.min.js"></script>
        <?php wp_enqueue_script("jquery"); ?>

        <!-- Boostrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

        <!-- jQuery scrips -->
        <script src="<?php bloginfo('stylesheet_directory'); ?>/js/hideheader.js"></script>
        <script src="<?php bloginfo('stylesheet_directory'); ?>/js/bootstrapwizard.js"></script>

        <?php wp_head(); ?>

jQuery

$(document).ready(function() {
        $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var $percent = ($current/$total) * 100;
            $('#rootwizard').find('.bar').css({width:$percent+'%'});
        }});
    });

HTML

   <div class="container">
    <div id="rootwizard">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
        <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
            <li><a href="#tab4" data-toggle="tab">Forth</a></li>
            <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
            <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
            <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
        </ul>
         </div>
          </div>
        </div>
    <div id="bar" class="progress progress-striped active">
      <div class="bar"></div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>  
</div>
</div>

Answer 1

In the page you described, there is no call for the bootstrapWizard.js file, You need to add it either to your scrips, or load it from a CDN link such as:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js

edit: There is a call for bootstrapWizard but it is not the same file. It contains only the "onload" function for it.