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>
