@VinceG - First of all, thanks for all your hard work on this plugin. I was trying to use the plugin for in a new project, but I quickly realized that it doesn't work for Bootstrap 3.

Are there any upcoming plans for the wizard to support Bootstrap 3?

I would like to use the wizard but not in a modal dialog. can you make it optional to open the wizard in a modal dialog

I would like some of the changes you've made since your last release, could you release the latest changes?

Will this code work with the Bootstrap Wizard from gilluminate?
https://github.com/gilluminate/Bootstrap-Wizard

I have this issue with gilluminate's Bootstrap Wizard I am using:
How can I hide/remove and then show/add back a panel/step?

EG: User clicks a checkbox that causes a step to be removed. User unchecks it and the step is put back.

Left, Right and Below tabs were removed from Bootstrap 3.
So .tabs-left does nothing.
http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-tabsleft.html

health,
great job helping me much. I have a question how to add automatically generate page numbers or if you can add this feature. Great, thank you for that.

I tried selectpicker, chose and selectify. Result is same.

http://cl.ly/image/3U3Z3o2Y0T3Y

As you see selectbox is always acts like its inside of an iframe, I changed position tag and added z-index but nothing worked.

What I'm doing wrong, I really want to have good ui , classic selectboxes works fine but others sucks.

Maybe this is an bug or my fault, I just want to let you know?

Could you help me guys?

Thanks alot

It would be possible to provide a minified version of this wonderful plugin?

Thanks!

I have a question regarding css styles applied to the tabs. Is it possible to make the tabs appear more like the tabs that are available in other wizard type controls? For example, like the tabs in https://github.com/gilluminate/Bootstrap-Wizard? If yes, what is the way to do this.

Thanks.

when you add another Tab in this wizard and you click the tabs in that Tab, the wizard next button will go to somewhere else.

The fix for this:

• $('a[data-toggle="tab"]', element).on('click', function (e) {
• $('a[data-toggle="tab"]', $navigation).on('click', function (e) {
• $('a[data-toggle="tab"]', $element).on('show', function (e) {
  +$('a[data-toggle="tab"]', $navigation).on('show', function (e) {

Hello, could you please add Bower support for this repo? It is used for a better and automated package management, and it's another Twitter project that is gaining more and more users each day.

What license is this project using? It would be great if you added a license document.

Hi,
I don't know which code is the latest code, the one on the website or the one in the git.
I tried using your code to produce the example "disable tab click". The "Next" and "Previous" buttons are not working in this example when I use the code in git. Could you please check this once.

Thanks,
Vishnu

Have any example of use with AngularJS? Thanks!

The validation of radio buttons does not work, if I use the wizard with bootstrap 3. I can switch to the next tab, although no radio button is selected. With the current version of bootstrap 2.3 it works.

Hi,
It seems there is an issue, with the onTabShow event. According to documentation, returning false in the handler, should prevent displaying the tab. For me, it dosen't work. The onNext and onPrevious handlers are working ok.

The "next" method does not work when there is a divider in the navbar between the
current tab and the next one.

For example

li: a(href="#tab5",data-toggle="tab") Tab5
li.divider-vertical
li: a(href="#tab6",data-toggle="tab") Tab6

Removing the divider makes the code work as expected.

Since dividers are part of the Bootstrap documentation and examples, this should probably be accounted for.

I am using twitter bootstrap plugin in a development. I want to advance to next screen, only if I press "Ok" in a modal dialog http://jqueryui.com/dialog/

Hi Vince, thanks for a great job. I want to use ajax to save step data. So for every step as i click next, i want the data saved .

Can you pls post a code that will allow me do that

one step in my wizard use tabs as catalog and i need to prevent user from click the wizard tab but allow catalog ones.
for now
onclick:{return false;}
will prevent both.

I'm trying to port a webpage a made over to this wizard. On my page I had a load of PHP which ran when the submit button was pressed (it ran a load of MySQL queries and returned results) The submit button did a Server Self for this.

With this wizard, the form is still loaded on one page, however my question is, could I set the next buttons on specified pages to perform the same action as my Submit button?

Returning false in the onTabShow, onTabChange, and onTabClick events does not prevent the wizard from moving onward to the next section. This was tested using the latest version in Github at the time of writing.

Simple Ex:

$('#container .bootstrap-wizard-component').bootstrapWizard({
'onTabChange': function(tab, navigation, index) {
return false; // does not actual cancel tab change
}
});

Could you please add a functionality to add new Dynamic Steps ( tab and content ).

The Bootstrap Wizard appears to use a JavaScript Future Reserved Word ('class') as an array key.
This breaks the Next/Previous buttons in IE8 (and earlier), although why IE 8 complains whereas IE 9, Chrome FF etc. don't appear to have a problem I don't know..

I worked around it by changing 'class' to 'tabClass' in TbWizard.php (lines 96, 97 and 99) and in jquery.bootstrap.wizard.js (lines 145 & 146).

This appears to be a problem also in the original Twitter Bootstrap Wizard Plugin.

From: clevertech/YiiBooster#116

I have a very strange problem. The button functionality doesn't work and the only chance to move is by clicking on the tab names.

I check it with http://vinceg.github.io/Bootstrap-Admin-Theme-3/forms.html . The online version works fine, but when i download it in my pc it doesn't work.

Any advice?

I tried using the bower package but I couldn't get it to work with bootstrap v3. I don't think the script that comes in the bower package is as up to date as the github repo. After downloading the source from your github repo instead of using the bower package it worked.

Thanks

Never actually tested this but need to test and see if this works and if not then try and implement nested wizards.

Hi !

with the new version the event onTabShow doesn't fire any more (only on load) and the onTabClick and onTabChange doesn't give the index option (always 0).

Tell me if you need some code.

Hugo

What would be the best way to go about creating unique next buttons? I want other events to be triggered on each click of "next" . The extra events will be determined by the tab that it is on.

The full idea of what I am trying to do with the wizard is this: A user submits info in step1, someone with more permissions is able to submit step2, someone with even more permissions is able to submit step3, etc. Upon submission of each step, events like email notifications, external scripts and database updates are triggered.

Currently, hitting the browser back button (or Backspace on the keyboard) doesn't go to the previous tab, it just leaves the page and the user could lose work they've done.

When using jquery.bootstrap.wizard.min.js with Bootstrap 3+ the "next" and "previous" buttons do not function properly, however replacing it with the uncompressed version (jquery.bootstrap.wizard.js) everything seems to work perfectly with BS3+.

Hello,

I have strange issue,

I'm using version 1.0, old stuff I guess cause new file have some differences but they are both 1.0 bootsrap wizard.

Jquery : jquery-1.8.0.min.js

I'm using jquery validation, everything works fine in all browsers , but not ie9, clicking tabs are working but not next button, I tried without validation but even without it no response, I just curious if something troubleshoots why ie8 accepts? Normally the stupid ie should be ie8 not ie9.

I'm looking for hours, couldn't figure out, try to change version didn't work, I'm trying my luck maybe there is known issue, happened somehow on ie9.

Thanks guys.

It would seem that you and I are duplicating our efforts. I've created a Twitter Bootstrap Wizard very similar, it even uses the same UI inspiration referenced in http://jsfiddle.net/weswinham/ySfN6/

I wonder if you would be interested in combining our efforts and somehow integrate your great work with mine:

https://github.com/gilluminate/Bootstrap-Wizard

I cloned the twitter-bootstrap-wizard git repo and ran the example with form validation; /app/bower_components/twitter-bootstrap-wizard/examples/validation.html. I noticed that clicking the next button only executes the 'onNext' callback once when I expected it to be executed every time. Is this by design? I was able to get he behavior I wanted by changing the event binding from 'one' to 'bind' in the fixNavigationButtons method.

Wizard unexpectedly set the width of progress bars in cards to that of the bar in progress container.

Hello,

This is not an issue, it could be classified as a question or an enhancement. I am planning on using this wizard and attaching the same inside the body class of bootstrap modal. Would like to know if its common to have a bootstrap wizard inside a modal for create operation (Create/Edit). If so has anyone come across any issues or potential recommendations to start with. Would like to know before i give it a try on possible issues or better alternatives to achieve the same.

Is there a reason this would happen ? Do you have BS3 support btw? - Thanks

returning false onNext with Ajax not prevent tab to move forward, if my ajax status equal success than move forward otherwise it is stay in currentIndex.

$('#rootwizard').bootstrapWizard('show','currentIndex');
return false;

I tried before return false but seems does not effect.

  $('#rootwizard').bootstrapWizard({
        'tabClass': 'bwizard-steps',
        'onTabClick': function(tab, navigation, index){
          return false;
      },
        'onNext': function(tab, navigation, index) {
      if (index == 1){
        var $valid = $("#d_form").valid();
        if(!$valid) {
          $d_validator.focusInvalid();
          return false;
        }else {
            var $form = $("#d_form");
                form_data = $form.serializeFormJSON() || '';
            $.ajax({
              url : "<?php echo base_url(); ?>joborder/form_wizard1",
              type : 'POST',
              dataType: 'json',
              data : form_data,
              async : false,
              success: function(d){
                if(d.status == 'success'){
                  $.pnotify({
                      title: 'Notification',
                      text: d.message,
                      type: d.status
                    });
                }else {
                  $('#rootwizard').bootstrapWizard('show','currentIndex');
                     return false;
                  // not prevent tab to move forward, 
                }
              }
          });
        }
      }
  });

Thanks, sorry for my English.

I'm having trouble getting the wizard to go to a step on the wizard programmatically, how can I set a specific step index in javascript?

$('#tab3').trigger('click'); doesnt seem to work. Sorry if this is not the right place for questions, I wasn't able to find anything online. Any help would be greatly appreciated.

Is it possible to have the following behavior ?

• steps : 1, 2, 3, 4, 5
• let the user go from step 1 to 5 but it is not possible for him/her to jump from a step to another one that is not the next one.
• let the user click only on previous tabs (tabs already visited)

Thanks

Was just clicking through the examples and found a problem with: http://vadimg.com/twitter-bootstrap-wizard/examples/basic-formvalidation.html

If you click next you get "enter your name" as you should, but if you click on the pills above it jumps to whichever tab you want regardless of if the form is valid.

How can I jump between steps in the wizard?

Hi,

I noticed this diff between my copy and the latest copy on here:

•   $navigation = element.find('ul:first', element);
  

•   $navigation = element.find('> ul:first', element);
  

When I applied this latest change it broke the application of tab styles. Removing the "> " fixes it again.

A bug?

Thanks,
Dan

Hi

I am using the definitely typed bindings to create and manipulate a wizard. I am able to specify the options for my wizard to set things like the next / previous / first selectors and methods to call for onNext and onFirst.

However if I am on the first tab and want to call $('#wizard').show(3) to go to the specified tab instead of the second tab calling the show method as defined here:

interface Wizard {
.........
show(index: number) : any;
}

doesn't work as I expect.

I would expect it to use the method from bootstrap.wizard.js as defined here:

this.show = function (index) {
return element.find('li:eq(' + index + ') a').tab('show');
};

However this doesn't happen - what actually happens is a call is made into the jQueryUI library directly:

show: (function( orig ) {
return function( option ) {
if ( standardAnimationOption( option ) ) {
return orig.apply( this, arguments );
} else {
var args = _normalizeArguments.apply( this, arguments );
args.mode = "show";
return this.effect.call( this, args );
}
};
})( $.fn.show ),

Am I doing something wrong, and if so can you point me in the right direction, or is this a bug ?

Thanks

Timestamp: 10/17/2012 03:11:41 PM
Error: SyntaxError: missing } after function body
Source File: http://localhost:8000/static/consumer-packed.js?a32a21d5
Line: 1, Column: 60
Source Code:
onFirst':null,'onTabClick':null,'onTabShow':null}})(jQuery);

I don't know if it is actually anything, I know little about javascript but am working with trying to do a few things; the plugin appears to work but I get this error and I can't seem change anything else on my page, but that may be my lack of knowledge with what I'm doing atm.

EDIT: Actually yeah -- this is stopping other events from happening in my basic on load experiments. When I remove bootstap.wizard.js, everything I'm doing works. I don't know if the minifier is working this over or what -- all the relevant '}' are in place and adding some does nothing except add more errors.

I am using the jquery.validation from the base MVC 4 project in Visual Studio 2012.
I needed a way to validate only the fields in the current step.
I looked at the example of the form validation, but it seemed to be leading toward a nightmare of hard coded items that couldn't be reused and difficult to maintain.

I thought I would share my first implementation of the step validation using the onNext event. My step containers are

                    var isValid = false;
                    var hadError = false;
                    var tabs = $(".tab-pane");
                    var currentTab = tabs[index - 1]; 
                    var inputs = $(":input");
                    var stepElements = $(currentTab).find(inputs);
                    var count = stepElements.length;
                    if (count <= 0) {
                        return true;
                    }
                    $(stepElements).each(function (idx) {
                        isValid = $(document.forms[0]).validate().element($(this));
                        if (!isValid) { hadError = true; }
                    });

                    return !hadError;

            },

Hi.

I'm using this excellent little plugin and I wish to be able to prevent the user from switching to specific tabs unless they have performed some tasks in the first 1-2 tabs.

If the clicked tab where passed along in the callback I could do that, but it seems as if it is the current active tab that is passed to the onTabClick function. And I have no idea to figure out which tab the user clicked.

One suggestion is to add it as a parameter to the callback check out https://github.com/qzio/twitter-bootstrap-wizard/commit/31a61d69fa7019f81d69d7a21df467eee8b816ae, but that would break the now consistent API...

What do you think?

Basic Demo not working properly in IE10

in lines 32, 34, 38, 40 the code uses 'li.next' and 'li.previous'.
should use $settings.nextSelector and $settings.previousSelector instead?

Hi,

I am using Basic left Tab Wizard in my rails application along with Client side validations.I need to move to the tab which got errors on submitting the form or highlight the tab that has errors.

How can I achieve this

Thanks in advance.