$(document).ready(function() {
loadDataOnReady();
loadDataOnClick();
changeSteps();
nextStep();
finishWizard(function() {
//ON FINISH EVENT
});
});
function finishWizard(onFinish) {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-fin', function(event) {
var finButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
//Update button
finButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
finButton.addClass('disabled');
//AJAX SUBMIT FORM
var getMethod = currForm.attr('data-method');
var getAction = currForm.attr('data-action');
$.ajax({
url: getAction,
type: getMethod,
data: currForm.serialize(),
success: function() {
//AJAX success
wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');
thisMenu.addClass('success');
//Update button
finButton.html('Finish');
finButton.removeClass('disabled');
window.setTimeout(function() {
//UI
$('.alert').hide();
//FINISHED WIZARD
//FUNCTION HERE
onFinish();
},500);
},
error: function() {
//Ajax failure
wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
thisMenu.addClass('error');
window.setTimeout(function() {
//Get "data-for" attribute and find element
var dataLoad = thisStep.attr('data-load');
//UI
$('.alert').hide();
thisMenu.removeClass('error');
thisMenu.addClass('active');
//Update button
finButton.html('Finish');
finButton.removeClass('disabled');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(currStep.html());
}
},2000);
}
});
});
}
function nextStep() {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-next', function(event) {
var prevButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
//Update button
prevButton.html('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif"> Please wait...');
prevButton.addClass('disabled');
//AJAX SUBMIT FORM
var getMethod = currForm.attr('data-method');
var getAction = currForm.attr('data-action');
$.ajax({
url: getAction,
type: getMethod,
data: currForm.serialize(),
success: function() {
//AJAX success
wizardContent.prepend('<div class="alert alert-success"><strong>That was successful!</strong> Please wait for the next step.</div>');
thisMenu.addClass('success');
//Update button
prevButton.html('Next step');
prevButton.removeClass('disabled');
window.setTimeout(function() {
//Get "data-for" attribute and find element
var dataLoad = thisStep.attr('data-load');
//UI
$('.alert').hide();
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(nextStep.html());
}
},500);
},
error: function() {
//Ajax failure
wizardContent.prepend('<div class="alert alert-danger"><strong>Something went wrong!</strong> Please try again.</div>');
thisMenu.addClass('error');
window.setTimeout(function() {
//Get "data-for" attribute and find element
var dataLoad = thisStep.attr('data-load');
//UI
$('.alert').hide();
thisMenu.removeClass('error');
thisMenu.addClass('active');
//Update button
prevButton.html('Next step');
prevButton.removeClass('disabled');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(currStep.html());
}
},2000);
}
});
});
}
function changeSteps() {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-prev', function(event) {
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var prevStep = $('.step-' + (currStep - 1));
var prevMenu = $('.step-' + (currStep - 1) + '-menu');
//Update menu
wizardButtons.removeClass('active');
prevMenu.addClass('active');
prevMenu.removeClass('success');
//Get "data-for" attribute and find element
var dataLoad = prevStep.attr('data-load');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(prevStep.html());
}
});
}
function loadDataOnReady()
{
var wizardContent = $('.wizard-content');
//Get "data-for" attribute and find element
var dataFor = $('.wizard-menu .list-group-item.active').attr('data-for');
var elementFor = $(dataFor);
var dataLoad = elementFor.attr('data-load');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(elementFor.html());
}
}
function loadDataOnClick()
{
var wizardButtons = $('.wizard-menu .list-group-item');
var wizardContent = $('.wizard-content');
wizardButtons.on('click', function(event) {
event.preventDefault();
//Change active state
wizardButtons.removeClass('active');
$(this).addClass('active');
//Get "data-for" attribute and find element
var dataFor = $(this).attr('data-for');
var elementFor = $(dataFor);
var dataLoad = elementFor.attr('data-load');
// Check if attribute does exist
// If true then load ajax, else load from div
if (typeof dataLoad !== 'undefined' && dataLoad !== false)
{
//Load content ajax
wizardContent.load(dataLoad);
}
else
{
wizardContent.html(elementFor.html());
}
});
}
.container {
margin-top: 1%;
}
.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
background-color: #7aba7b;
border-color: #7aba7b;
color: #ffffff;
}
.list-group-item.success > h4 {
color: #ffffff;
}
.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
background-color: #d59392;
border-color: #d59392;
color: #ffffff;
}
.list-group-item.error > h4 {
color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/my-style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="list-group wizard-menu">
<a href="#" class="list-group-item active step-1-menu" data-for=".step-1">
<h4 class="list-group-item-heading">Registro de Produtos</h4>
</a>
<a href="#" class="list-group-item step-2-menu" data-for=".step-2">
<h4 class="list-group-item-heading">Acessoria da Empresa</h4>
</a>
<a href="#" class="list-group-item step-3-menu" data-for=".step-3">
<h4 class="list-group-item-heading">Acessoria Juridica</h4>
</a>
<a href="#" class="list-group-item step-4-menu" data-for=".step-4">
<h4 class="list-group-item-heading">Acessoria Contabil</h4>
</a>
<a href="#" class="list-group-item step-5-menu" data-for=".step-5">
<h4 class="list-group-item-heading">Acessoria Pos Mercado</h4>
</a>
</div>
</div>
<div class="col-md-8">
<div class="well wizard-content"></div>
<div class="hide">
<div class="step-1">
<h3>Registro de produtos</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
</div>
<div class="step-2">
<h3>Acessoria da Empresa</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
</div>
<div class="step-3">
<h3>Acessoria Juridica</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
</div>
<div class="step-4">
<h3>Acessoria Contabil</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
</div>
<div class="step-5">
<h3>Acessoria Pos Mercado</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia illum dicta error maiores quaerat facilis expedita, iste sequi nostrum ipsam quidem facere aliquam doloribus quisquam unde, culpa, odit officiis.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/my-action.js" type="text/javascript"></script>
</body>
</html>