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=".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>

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./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>

• javascript
• jquery
• twitter-bootstrap

• 2 do you really put your script files inside a folder named stylesheet_directory? – invernomuto Commented Mar 30, 2015 at 20:43
• 1 @InvernoMuto Hehe, no. I haven't understood wordpress so much yet. "Stylesheet_directory" is the theme folder :) – Olen Commented Mar 30, 2015 at 20:45
• If it's not in there then you aren't including jquery according to your code. Which would break your page. – Joe Swindell Commented Mar 30, 2015 at 20:51
• The code, script and everything should be there. tinyurl./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 Commented Mar 30, 2015 at 20:59
• I believe u're bootstrapWizard js file is not plete, try downloading another version. – Ziv Weissman Commented Mar 30, 2015 at 21:08

1 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./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.