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>

do you really put your script files inside a folder named stylesheet_directory? — alessandro
@InvernoMuto Hehe, no. I haven't understood wordpress so much yet. "Stylesheet_directory" is the theme folder :) — Olen
If it's not in there then you aren't including jquery according to your code. Which would break your page. — Joe Swindell
The code, script and everything should be there. tinyurl.com/p9sb9em - Scroll down till you see the bar. Sorry about the language on this page, but the bar etc. has not been touched, so that one is on English. — Olen
I believe u're bootstrapWizard js file is not complete, try downloading another version. — Ziv Weissman

Ziv Weissman Ziv Weissman · Accepted Answer · 2015-03-30T22:00:08

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.

Bootstrap - "Uncaught TypeError: undefined is not a function"

1 Answers