CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Theg8nj
Theg8nj

Reputation: 153

Javascript issue | progress bar

I found this here http://www.codeply.com/go/bp/wj9gWh8ulj and I was trying to know more about javascript and jquery by applying these codes, but I faced an error with implementing this which is the progress bar and the continue buttons are not functional for some reason that I don't know. 

<html>
<head>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">

<script src="js/bootstrap.min.js"></script>
<script>
  $('.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')
  })
</script>
</head>

<body>

<div class="container" id="myWizard">

<h3>Bootstrap Wizard</h3>

<hr>

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 20%;">
Step 1 of 5
</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">Step 1</a></li>
       <li><a href="#step2" data-toggle="tab" data-step="2">Step 2</a></li>
       <li><a href="#step3" data-toggle="tab" data-step="3">Step 3</a></li>
       <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>
       <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</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>Security Question 2</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 selected="" 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 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 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 next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step5">
<div class="well"> <h2>Step 5</h2> You're Done!</div>
 <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>



<!-- Bootstrap Core JavaScript -->

<!-- js of the slider blugin-->


</body>

</html>

Upvotes: 0

Views: 223

Answers (1)

W. van Kuipers
W. van Kuipers

Reputation: 1400

It works for me: http://codepen.io/wvankuipers/pen/qdxVpw

I guess the problem you are facing is that you try to use jQuery/Bootstrap before it is loaded. To fix this place the Javascript code inside this block:

$(function(){ 
     /* Your code here */
});

Read more about this here: http://api.jquery.com/jquery/#jQuery3

Short version: this will make sure the DOM is fully loaded (and the required JS is loaded) before your code gets executed.

Upvotes: 1

Related Questions