Bootstrap progress bar wizard stuck

When you click Continue through the steps, then click Previous on Step 5, then click Continue (on Step 4), the progress bar doesn't move forward. It seems to get stuck. Any idea as to why this is happening?

http://jsfiddle.net/hmwqkpjf/8/

<div class="tab-pane fade" id="step4">
    <div class="well">
        STEP4
    </div>
    <a data-step="3" data-toggle="tab" href="#step3" class="btn btn-default pull-left">Previous Step</a>
     <a class="btn btn-default next" href="#">Continue</a>
  </div>

<div class="tab-pane fade" id="step5">
    <div class="well">
      STEP5
    </div>
    <a data-step="4" data-toggle="tab" href="#step4" class="btn btn-default pull-left">Previous Step</a>
     <a class="btn btn-success first" href="#">Start over</a>
  </div>

JS:

$('.next').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');
  return false;

})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

  //update progress
  var step = $(e.target).data('step');
  var percent = (parseInt(step) / 5) * 100;

  $('.progress-bar').css({width: percent + '%'});
  $('.progress-bar').text("Step " + step + " of 5");

  //e.relatedTarget // previous tab

})

$('.first').click(function(){

  $('#myWizard a:first').tab('show')

})

Answers 1

  • This might be due to having multiple 'a' tags with data-toggle to same containers.

    Make a similar implementation for the previous-button click, then all seems to be good.

    // Previous button click event
    $('.prev').click(function() {
        var prevId = $(this).parents('.tab-pane').prev().attr('id');
        $('a[href=#' + prevId + ']').click();
    });
    

    Here's your updated fiddle - http://jsfiddle.net/hmwqkpjf/12/


Related Articles