Continue and previous buttons not navigating Javascript bootstrap

Question

Below is a piece of code I've been trying to get to work. The Continue and previous buttons not working,The javascript is not showing the next and previous tabs.

Javascript:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $('.prev').click(function () {
        ;
        var prevId = $(this).parents('.tab-pane').prev().attr("id");    
        $('[href=#' + prevId + ']').tab('show');

        return false;

    });


    $('.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) / 6) * 100;

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

        //e.relatedTarget // previous tab

    })

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

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

    })
</script>

Html:

<div class="navbar">
    <div class="navbar-inner">
        <ul id="tabs1" class="nav nav-pills">
           <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
           <li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
           <li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
           <li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
           <li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
           <li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
        </ul>
    </div>

the full code comes from:https://www.codeply.com/go/RMKW5H5u2e

Please provide us with a minimal working example (add some HTML and/or a working snippet, containing your bug or problem) so that we can aid you in your problem: https://stackoverflow.com/help/mcve . You could add an event listener which would be similar as the click events for the tabs themselves to the "previous" and "continue" button. — Barrosy, Mar 14 '19 at 10:10
It is still lacking code, please show us what you are trying to do: https://jsfiddle.net/psfy05jw/ — Barrosy, Mar 14 '19 at 10:22
@barbsan It's code OP got from Codeply and apparently not working according OP's specifics, which is why I am trying to figure out what OP is trying to achieve. Code provided in the link is not addressing the issue. — Barrosy, Mar 14 '19 at 10:39
@Barrosy if you open that link you'll see that prev and next button don't work there - exactly as in description (and they throw error - it's missing in this question) — barbsan, Mar 14 '19 at 10:43

score 0 · Answer 1 · answered Mar 14 '19 at 10:27

So your problem is the jQuery syntax (you should look at your console output, you would have caught the error).

What need is:

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

  var prevId = $(this).parents('.tab-pane').prev().attr("id");
  
  $('a[href$=\"#'+prevId+'\"]').tab('show');
  return false;
  
})

$('.next').click(function(){
  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('a[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) / 6) * 100;
  
  $('.progress-bar').css({width: percent + '%'});
  $('.progress-bar').text("Step " + step + " of 6");
  
  //e.relatedTarget // previous tab
  
})

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

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

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" id="myWizard">
  
   <h3>New Anomaly Detection Model</h3>
  
   <hr>
  
   <div class="progress">
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="6" style="width: 20%;">
       Step 1 of 6
     </div>
   </div>
  
   <div class="navbar">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
               <li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
               <li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
               <li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
               <li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
               <li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
            </ul>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane fade in active" id="step1">
         
        <div class="well"> 
          
            <label>Security Question 1</label>
            <select class="form-control input-lg">
              <option value="What was the name of your first pet?">What was the name of your first pet?</option>
              <option value="Where did you first attend school?">Where did you first attend school?</option>
              <option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
              <option value="What is your favorite car model?">What is your favorite car model?</option>
            </select>
            <br>
            <label>Enter Response</label>
            <input class="form-control input-lg">
            
        </div>
         <a class="btn btn-default btn-lg next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step2">
         <div class="well"> 
          
            <label>Choose Your Input Source</label>
            <select class="form-control  input-lg">
              <option selected="" value="CSV">CSV</option>
              <option value="Database">Database</option>
            </select>
            <br>
            <label>Path</label>
            <input class="form-control  input-lg">
            
         </div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step3">
        <div class="well"> <h2>Step 3</h2> Add another step here..</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step4">
        <div class="well"> <h2>Step 4</h2> Add another almost done step here..</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane fade" id="step5">
        <div class="well"> <h2>Step 5</h2> Almost there!</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
       <div class="tab-pane fade" id="step6">
        <div class="well"> <h2>Step 6</h2> Last one!</div>
         <a class="btn btn-default prev" href="#">Previous</a>
         <a class="btn btn-success first" href="#">Start over</a>
      </div>
   </div>
  
   <hr>
  
   <a href="http://www.bootply.com/wj9gWh8ulj">Edit on Bootply</a>
  
   <hr>
  
</div>

Do note the $("a[href$=\"#'+prevId+'\").tab('show'); is what makes your buttons work.

Source for my answer: Select tag with href

score 0 · Accepted Answer · answered Mar 14 '19 at 10:29

0

You're missing quotes in $('[href=#' + nextId + ']') and $('[href=#' + prevId + ']')

Should be:

$('[href="#' + nextId + '"]').tab('show');
//and
$('[href="#' + prevId + '"]').tab('show');

answered Mar 14 '19 at 10:29

barbsan

3,418
11
21
28

Continue and previous buttons not navigating Javascript bootstrap

2 Answers2