<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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">1. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-2-menu" data-for=".step-2">
<h4 class="list-group-item-heading">2. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-3-menu" data-for=".step-3">
<h4 class="list-group-item-heading">3. AJAX Load</h4>
<p class="list-group-item-text">AJAX-load your data. (Attribute: data-load)</p>
</a>
<a href="#" class="list-group-item step-4-menu" data-for=".step-4">
<h4 class="list-group-item-heading">4. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-5-menu" data-for=".step-5">
<h4 class="list-group-item-heading">5. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-6-menu" data-for=".step-6">
<h4 class="list-group-item-heading">6. AJAX Load</h4>
<p class="list-group-item-text">AJAX-load your data. (Attribute: data-load)</p>
</a>
<a href="#" class="list-group-item step-7-menu" data-for=".step-7">
<h4 class="list-group-item-heading">7. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-8-menu" data-for=".step-8">
<h4 class="list-group-item-heading">8. Load from DIV</h4>
<p class="list-group-item-text">Load your data from a div.</p>
</a>
<a href="#" class="list-group-item step-9-menu" data-for=".step-9">
<h4 class="list-group-item-heading">9. AJAX Load</h4>
<p class="list-group-item-text">AJAX-load your data. (Attribute: data-load)</p>
</a>
</div>
</div>
<div class="col-md-8">
<!-- Carrega o item selecionado-->
<div class="well wizard-content">
</div>
<!-- Content to load-->
<div class="hide">
<div class="step-1">
<!-- add attribute data-action="" and data-method="" with path to file and form-method to submit form -->
lljlkjlkjlkjlkjlkjlk
</div>
<div class="step-2">123123123123132hdfghdfgh</div>
<div class="step-3">dfhgdhdfghdfgh</div>
<div class="step-4">123123123123132hdfghdfgh</div>
<div class="step-5">dfhgdhdfghdfgh</div>
<div class="step-6">123123123123132hdfghdfgh</div>
<div class="step-7">7 hdfghdfgh</div>
<div class="step-8">8 123123123132hdfghdfgh</div>
<div class="step-9">9 hdfghdfgh</div>
<div class="step-10">dfhgdhdfghdfgh</div>
</div>
</div>
</div>
</div>
.container {
margin-top: 1%;
}
/*Wizard*/
.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;
}
/**
* Created by: Alexander Mahrt
* Date: 20.11.13
* Time: 03:00
*/
$(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());
}
});
}
