troubleshooting Question

How to use bootstrap wizard within a bootstrap wizard

Avatar of mgmhicks
mgmhicks asked on
BootstrapCSSjQuery
1 Comment1 Solution477 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Justin Pilditch
Full Stack Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros