I'm using jquery,bootstrapWizard plugin to turn a standard form into a wizard. I've had this working but in a re-write of the form and updating jquery and associated scripts I've corrupted the form and can't see what's gone wrong.
I'm using bootstrap version 3.1.1. Jquery 2.01 My form has 4 tabs and in appearance is set up correctly. I can navigate to each tab using the navigation buttons at the top of the form however I cannot navigate beyond the second page using the next button.
I thought initially the validation was causing the problem so removed the validation scripts for now but the problem still occurs.
Navigating with the buttons the final submit button doesnt appear. I'm not sure whether my html is the problem - although I've used a standard set up, or whether it's either the plugin script, or my set up script.
I'll set up a fiddle but has anyone come across this problem before
here's the basic wizard html:
<form action="dummy">
<div class="wizard-form">
<div class="wizard-content">
<ul class="nav nav-pills nav-justified steps">
<li>
<a href="#step1" data-toggle="tab" class="wiz-step active">
<span class="step-number">1</span>
<span class="step-name">
<i class="fa fa-check"></i>
Article Details
</span>
</a>
</li>
<li>
<a href="#step2" data-toggle="tab" class="wiz-step">
<span class="step-number">2</span>
<span class="step-name">
<i class="fa fa-check"></i>
Article Content
</span>
</a>
</li>
<li>
<a href="#step3" data-toggle="tab" class="wiz-step">
<span class="step-number">3</span>
<span class="step-name">
<i class="fa fa-check"></i>
Images and Files
</span>
</a>
</li>
<li>
<a href="#step4" data-toggle="tab" class="wiz-step">
<span class="step-number">4</span>
<span class="step-name">
<i class="fa fa-check"></i>
Attributes and Submit
</span>
</a>
</li>
</ul>
<div id="bar" class="progress progress-striped progress-sm active" role="progressbar">
<div class="progress-bar progress-bar-warning"></div>
</div>
<div class="tab-content">
<div class="alert alert-danger display-none">
<a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>
Your article has errors. Please correct them to proceed.
</div>
<div class="alert alert-success display-none">
<a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>
Your form validation is successful!
</div>
<!-- TAB PANE 1 -->
<div class="tab-pane active" id="step1">
<p>Tab 1</p>
</div>
<!-- TAB PANE 2 -->
<div class="tab-pane" id="step2">
<p>Tab 2</p>
</div>
<!-- TAB PANE 3 -->
<div class="tab-pane" id="step3">
<p>Tab 3</p>
</div>
<!-- TAB PANE 4 -->
<div class="tab-pane" id="step4">
<p>Tab 4</p>
</div>
</div>
</div>
</div>
<div class="wizard-buttons">
<div class="row">
<div class="col-md-12">
<div class="col-md-offset-3 col-md-9">
<a href="javascript:;" class="btn btn-default prevBtn">
<i class="fa fa-arrow-circle-left"></i>
Back
</a>
<a href="javascript:;" class="btn btn-primary nextBtn">
Continue
<i class="fa fa-arrow-circle-right"></i>
</a>
<a href="javascript:;" class="btn btn-success submitBtn">
Submit
<i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</form>
and here's the wizard script:
var FormWizard = function() {
console.log("setting up form");
return {
init: function() {
if (!jQuery().bootstrapWizard) {
return;
}
var wizform = $('#myForm');
var alert_success = $('.alert-success', wizform);
var alert_error = $('.alert-danger', wizform);
/*-----------------------------------------------------------------------------------*/
/* Initialize Bootstrap Wizard
/*-----------------------------------------------------------------------------------*/
$('#formWizard').bootstrapWizard({
'nextSelector': '.nextBtn',
'previousSelector': '.prevBtn',
onNext: function(tab, navigation, index) {
alert_success.hide();
alert_error.hide();
var total = navigation.find('li').length;
console.log("Total:", total);
var current = index + 1;
console.log("current:", current)
$('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
jQuery('li', $('#formWizard')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#formWizard').find('.prevBtn').hide();
} else {
$('#formWizard').find('.prevBtn').show();
}
if (current >= total) {
$('#formWizard').find('.nextBtn').hide();
$('#formWizard').find('.submitBtn').show();
} else {
$('#formWizard').find('.nextBtn').show();
$('#formWizard').find('.submitBtn').hide();
}
},
onPrevious: function(tab, navigation, index) {
alert_success.hide();
alert_error.hide();
var total = navigation.find('li').length;
var current = index + 1;
$('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
jQuery('li', $('#formWizard')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {
jQuery(li_list[i]).addClass("done");
}
if (current == 1) {
$('#formWizard').find('.prevBtn').hide();
} else {
$('#formWizard').find('.prevBtn').show();
}
if (current >= total) {
$('#formWizard').find('.nextBtn').hide();
$('#formWizard').find('.submitBtn').show();
} else {
$('#formWizard').find('.nextBtn').show();
$('#formWizard').find('.submitBtn').hide();
}
},
onTabClick: function(tab, navigation, index) {
bootbox.alert('On Tab click is disabled');
return false;
},
onTabShow: function(tab, navigation, index) {
var total = navigation.find('li').length;
var current = index + 1;
var $percent = (current / total) * 100;
$('#formWizard').find('.progress-bar').css({
width: $percent + '%'
});
}
});
$('#formWizard').find('.prevBtn').hide();
}
};
Update: I added a couple of console.logs to get index etc as per question below placed in the onNext event. After the first click the index is shown as 1 which would be correct but does not increment any further.
I just realised also that the back button doesn't work either. So it gets to tab 2 (index 1) and gets stuck
The solution was helped by Tomanow answer in that I was able to rule out my set up as being the problem - thank you.
The final solution related to the plugin script itself. In an earlier working page I was using a minified version which worked correctly. While I was developing this page I used the full version.
I replaced the plugin in here with the minified version and it all worked again, reverted back to the full script and it failed. So somewhere along the way my library became corrupt.
Have downloaded the latest version and all working now.
So frustrating when it's the basics that fail