How to use bootstrap wizard within a bootstrap wizard

mgmhicks
mgmhicks used Ask the Experts™
on
I have the following code.  How do I make the pager-wizards work and differentiate the buttons between the wizards?

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ResidentApplication.aspx.vb" Inherits="CollectionSystem2015.ResidentApplication" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="../Content/bootstrap.css" media="screen" />
    <link rel="stylesheet" href="../scripts/datepicker/css/datepicker.css" />
    <link rel="stylesheet" href="..scripts/bootstrapvalidator/src/js/bootstrapValidator.js" />

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="../scripts/jquery-ui-1.11.4.js"></script>
    <script src="../scripts/bootstrap.js"></script>
    <script src="../Content/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
     <%--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>--%>
    <script src="../scripts/bootstrapValidator/src/js/bootstrapValidator.js"></script>
    <script src="../Scripts/modernizr-2.8.3.js"></script>
    <script src="../Scripts/jsMask/jquery.maskedinput.js"></script>
    <script type="text/javascript" src="https://jquery-blog-js.googlecode.com/files/SetCase.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.formatCurrency-1.4.0.min.js"></script>

</head>
<body>

    <form id="form2" runat="server">
        <div class="container">
            <div id="rootwizard">
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="#step1" role="tab" data-toggle="tab"><span class="badge badge-info">1</span>Applicants </a></li>
                    <li><a href="#step2" role="tab" data-toggle="tab"><span class="badge badge-info">2</span>&nbsp;Minors </a></li>
                    <li><a href="#step3" role="tab" data-toggle="tab"><span class="badge badge-info">3</span>&nbsp;Pets</a></li>
                </ul>
                <div class="progress">
                    <div id="progressBar" class="progress-bar progress-bar-striped">
                        <div class="bar">
                            <span></span>
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="step1"></div>
                    <div class="container">
                        <div id="appwizard">
                            <ul class="nav nav-tabs" role="tablist">
                                <li><a href="#app1" role="tab" data-toggle="tab"><span class="badge badge-info">1</span>Applicants </a></li>
                                <li><a href="#app2" role="tab" data-toggle="tab"><span class="badge badge-info">2</span>&nbsp;Minors </a></li>
                                <li><a href="#app3" role="tab" data-toggle="tab"><span class="badge badge-info">3</span>&nbsp;Pets</a></li>
                            </ul>
                            <div class="progress">
                                <div id="progressBar2" class="progress-bar progress-bar-striped">
                                    <div class="bar">
                                        <span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane" id="app1"></div>
                                <div class="tab-pane" id="app2"></div>
                                <div class="tab-pane" id="app3"></div>
                                 <ul class="pager wizard">
               <!-- These show as disabled on first tab. Add style="display:none;" to make the First button disappear when first tab.	  -->
               <li class="first previous"><a href="#" accesskey="f">First</a></li>
               <li class="previous"><a href="#" accesskey="p">Previous</a></li>
               <li class="last" style="display: none;"><a href="#">Done</a></li>
               <li class="next"><a href="#" accesskey="n">Next</a></li>
           </ul>
                            </div>

         
                        </div>
                    </div>
                    <div class="tab-pane" id="step2"></div>
                    <div class="tab-pane" id="step3"></div>
                    <p>&nbsp;</p>
                   


                </div>

                    <ul class="pager wizard">
               <!-- These show as disabled on first tab. Add style="display:none;" to make the First button disappear when first tab.	  -->
               <li class="first previous"><a href="#" accesskey="f">First</a></li>
               <li class="previous"><a href="#" accesskey="p">Previous</a></li>
               <li class="last" style="display: none;"><a href="#">Done</a></li>
               <li class="next"><a href="#" accesskey="n">Next</a></li>
           </ul>
            </div>
        </div>
    </form>
    <script>
        $('#rootwizard').bootstrapWizard({
            onTabShow: function (tab, navigation, index) {

                // Dynamically change percentage completion on progress bar
                var tabCount = navigation.find('li').length;
                var current = index + 1;
                var percentDone = (current / tabCount) * 100;
                $('#rootwizard').find('#progressBar').css({ width: percentDone + '%' });

                // Optional: Show Done button when on last tab; 
                // It is invisible by default.
                $('#rootwizard').find('.last').toggle(current >= tabCount);

                // Optional: Hide Next button if on last tab; 
                // otherwise it shows but is disabled
                $('#rootwizard').find('.next').toggle(current < tabCount);
            }
        });
        $('#appwizard').bootstrapWizard({
            onTabShow: function (tab, navigation, index) {

                // Dynamically change percentage completion on progress bar
                var tabCount = navigation.find('li').length;
                var current = index + 1;
                var percentDone = (current / tabCount) * 100;
                $('#appwizard').find('#progressBar2').css({ width: percentDone + '%' });

                // Optional: Show Done button when on last tab; 
                // It is invisible by default.
                $('#apptwizard').find('.last').toggle(current >= tabCount);

                // Optional: Hide Next button if on last tab; 
                // otherwise it shows but is disabled
                $('#appwizard').find('.next').toggle(current < tabCount);
            }
        });
    </script>
</body>
   
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Full Stack Developer
Commented:
Have you tried to give the UL an ID and then call it?

<ul  id="pagerwizard" class="pager wizard">

$('#pagerwizard').bootstrapWizard({
    ...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial