CODEWITHSUNDEEP
javascripttwitter-bootstrapwizard
Lying Dog
Lying Dog

Reputation: 1524

Bootstrap wizard: how can I move to the next step from JavaScript?

I have a bootstrap wizard where one of the steps shows a form with several buttons. One of those buttons needs to call an ajax action, and, if that is successful, move on to the next step in the wizard.

From the JavaScript tied to the onclick-Event of the button, how can I tell the wizard to move to the next step?

Upvotes: 6

Views: 13586

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29249

If you mean to this plugin so you call the wizard function like this:

wizard.bootstrapWizard('function_name', someValueIfNeeded);

So, for showing the next step you can do this:

wizard.bootstrapWizard('next')

The full methods list you can find in the docs

var wizard = $('#rootwizard').bootstrapWizard();

$('button').click(function(){
  wizard.bootstrapWizard('next')
});
#page {
  width:600px;
  margin:50px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>

<div id="page">
  <div id="rootwizard">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
            <li><a href="#tab4" data-toggle="tab">Forth</a></li>
            <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
            <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
            <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="tab-content">
      <div class="tab-pane" id="tab1">
        1
      </div>
      <div class="tab-pane" id="tab2">
        2
      </div>
      <div class="tab-pane" id="tab3">
        3
      </div>
      <div class="tab-pane" id="tab4">
        4
      </div>
      <div class="tab-pane" id="tab5">
        5
      </div>
      <div class="tab-pane" id="tab6">
        6
      </div>
      <div class="tab-pane" id="tab7">
        7
      </div>
    </div>	
  </div>
  <button>Next</button>
</div>

http://jsbin.com/mufomov/1

Upvotes: 7

Related Questions