Bootstrap Wizard Issues

Question

I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.

Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.

YouTube Video: https://youtu.be/zq9yCCUJQ68

HTML:

<div class="row">
<div class="col-md-12">
    <ul class="nav nav-pills">
        <li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
        <li><a data-toggle="tab" href="#billing">Billing</a></li>
        <li><a data-toggle="tab" href="#suppport">Support</a></li>
        <li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
    </ul>
    <div class="tab-content">

         <div id="mywebsites" class="tab-pane fade">
        <!--    <div class="col-md-4 website-container">
                <strong>Website URL:  </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
                <strong>Website Admin Login:  </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
                <strong>Plan:  </strong><p>Basic</p>
                <button type="button" class="btn btn-primary">Upgrade Plan</button>
                <button type="button" class="btn btn-danger">Cancel</button>
            </div>
            <div class="col-md-4 website-container">
                <strong>Website URL:  </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
                <strong>Website Admin Login:  </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
                <strong>Plan:  </strong><p>Basic</p>
                <button type="button" class="btn btn-primary">Upgrade Plan</button>
                <button type="button" class="btn btn-danger">Cancel</button>

            </div>
            <div class="col-md-4 website-container">
                <strong>Website URL:  </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
                <strong>Website Admin Login:  </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
                <strong>Plan:  </strong><p>Basic</p>
                <button type="button" class="btn btn-primary">Upgrade Plan</button>
                <button type="button" class="btn btn-danger">Cancel</button>
            </div>
            <div class="col-md-4 website-container">
                <strong>Website URL:  </strong><p><a href="https://powerfastwebsites.com">https://powerfastwebsites.com</a></p>
                <strong>Website Admin Login:  </strong><p><a href="https://powerfastwebsites.com/wp-admin">https://powerfastwebsites.com/wp-admin</a></p>
                <strong>Plan:  </strong><p>Basic</p>
                <button type="button" class="btn btn-primary">Upgrade Plan</button>
                <button type="button" class="btn btn-danger">Cancel</button>

            </div>-->
        </div> 
        <div id="billing" class="tab-pane fade">
            <h3>Billing</h3>
            <p>Some content in menu 2.</p>
        </div>
        <div id="suppport" class="tab-pane fade">
            <h3>Support</h3>
            <p>Some content in menu 2.</p>
        </div>
        <div id="newWebsite" class="tab-pane fade">
            <div id="rootwizard">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul class="nav nav-pills" id="myTab">
                                <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">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></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>
    </div>


</div>

JS

    $(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 .progress-bar').css({width:$percent+'%'});
            },
        'tabClass': 'nav nav-pills',
        'onNext': function(){alert("You hit next");}

    });

});

Answer 1

I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.