Question posted in 
I have a form with Twitter Bootstrap Wizard and I have several images that when I select one, I must store locally the value and go to the next tab (o._nextTab).
When I click the image it should go to the next tab, but currently is not working.
This is the idea:
(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({ width: percent + '%' });
$('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}
p._nextTab = function(wizard) {
$('.nextT').click(function(){
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
There will be several images, I want to click on the image and go to the next tab, or at least select the image and then when I click next get the value.
I’m using pyjade to create the templates so if theres any idea there or using javascript it will be welcome.
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><a href="#tab1" data-toggle="tab"><span class="step">1</span><span class="title">Chart Type</span></a>
</li>
<li><a href="#tab2" data-toggle="tab"><span class="step">2</span><span class="title">Data Source</span></a>
</li>
<li><a href="#tab3" data-toggle="tab"><span class="step">3</span><span class="title">Data</span></a>
</li>
<li><a href="#tab4" data-toggle="tab"><span class="step">4</span><span class="title">Chart Options</span></a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT"><a href="javascript:void(0);"><img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-chart.png" class="img-responsive"/></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><a href="javascript:void(0);"><img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/></a>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first"><a href="javascript:void(0);">First</a>
</li>
<li class="previous"><a href="javascript:void(0);">Previous</a>
</li>
<li class="next last"><a href="javascript:void(0);">Last</a>
</li>
<li class="next"><a href="javascript:void(0);">Next</a>
</li>
</div>
</form>
</div>
4
Answers
There are two problems in your code.
<div class="box-body chartOption nexT">should be nextT as you write this in your js:$('.nextT').click(function(){wizardis not a function, so you can’t call it likewizard('next');. You can take advantage of itsnextSelector(recommended) or write$(".next:not(.last)").click();instead.After fixing these problems, your code should be like this:
Refer to http://vinceg.github.io/twitter-bootstrap-wizard/
The following will save the selections made (and advance to the next tab). Selections are stored in an object by tab index.
It saves the element ID of elements that have the class
saveAndMoveNext. This class is also what triggers the “save this and move to the next tab”.When running it is best to click on the “Full Page” link. I’m not familiar with pyjade, but I have tried to keep it as close to how it was written in the question:
I have added
onclick="seltab(this);to each image, which on click goes to respective tab and also captures what is clicked.Here I assume three image corresponds to three tabs
You may simply find the index of the image on click using
$(this).index()and then call the$('#wizard').bootstrapWizard('show', index);For more flexibility, you may add a
data-stepatribute to the img and specify the step you want to go to. For example<img src="image-source" data-step="2" />. Then on click get the value of this attribute and pass it to this call$('#rootwizard').bootstrapWizard('show', value);You can do this by attaching a click handler to the images when you initialize the wizard
Alternatively, you may get the wizards current index on click and show the next one
OR simply call next on wizard