asked on
How to use bootstrap wizard within a bootstrap wizard
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> Minors </a></li>
<li><a href="#step3" role="tab" data-toggle="tab"><span class="badge badge-info">3</span> 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> Minors </a></li>
<li><a href="#app3" role="tab" data-toggle="tab"><span class="badge badge-info">3</span> 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> </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>
BootstrapCSSjQuery
Last Comment
Justin Pilditch
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.