I am having trouble in submitting the form spanning over 4 cards. The previous card's fields are lost. Here's my HTML markup

<div id="wizard-demo" class="wizard">
  <div class="wizard-card" "data-cardname"="">
    <div class="wizard-input-section-first">
      <%= simple_form_for(@user, :html => {:id => "new_user"}) do |f| %>
           <%= f.input :username %>
           .....
    </div>
   </div> <!-- first card ends here -->

  <div class="wizard-card" "data-cardname"="">
    <div class="wizard-input-section-first">
         <%= f.input :first_name %>
           .....
    </div>
   </div> <!-- last card ends here -->
  <% end %><!-- form ends here -->
</div>

To cut long story short all the form fields are not submitted.

Hi, Could you help me with how to add new buttons en footer?

Great work! Can you please put a license on this library?

I am wondering if data-onload in demo page will trigger loaded event for card level? It seems this attribute is not working.

I try to upload files but doesn't seems to work or in my case I don't know what is the workaround.

wizard.on("submit", function(wizard) {

        var formData = new FormData($('form:file'));
        alert(); //no alert
        console.log(formData); //no logs

    });

currently, the bootstrap-3 version is aligned very close to the top of the page

The Wizard objects trigger method has varying this contexts causing the _events array to be different depending on the caller. The method needs to handle whether the wizard card or the wizard is the this context and find the correct registered 'on' handler. The below code snippet handler fixes it.

var handler = this._events[name];
if (handler === undefined && this.wizard !== undefined) {
    handler = this.wizard._events[name];
}

So the whole method would look like the below:

 trigger: function () {
            var name = arguments[0];
            var args = Array.prototype.slice.call(arguments);
            args.shift();
            args.unshift(this);

            this.log("firing event " + name);
            var handler = this._events[name];
            if (handler === undefined && this.wizard !== undefined) {
               handler = this.wizard._events[name];
            }

            var ret = null;

            if (typeof (handler) == "function") {
                this.log("found event handler, calling " + name);
                try {
                    ret = handler.apply(this, args);
                }
                catch (e) {
                    this.log("event handler " + name + " had an exception");
                }
            }
            else {
                this.log("couldn't find an event handler for " + name);
            }
            return ret;
        }

i love this plugin. one thing that will be very useful, i think that you guys can add some feature that i can do card validation from ajax.

if you have provide, can you show me the documentation? thanks in advance 👍

Hello,

Your wizard is great, thanks for sharing.

Files upload doesn't work.
I know that it's tricky to submit a form with file to upload in it with Ajax, for security reasons.

Do you have a solution?

Many thanks,
Stitch

Is there an option to put html content (e.g. a link) into the errorPopover?
Ithe bootstrap documentation says to just put "html:true" to the popover options. I already tested it and it worked, but I'm not sure if it would be a good idea to set it as default.

Currently you specify the next, previous, submit, etc button text in the options when initializing a wizard. However it'd be ideal if you could instead specify the inner html, this way you can also include icons for the buttons.

Also it'd be useful if each card could specify what their own next button should look like.

Let me know if you guys agree with these features. I'm willing to implement them.

Hi,

I am using a card with card-level validation and I noticed the following behaviour:

1. I click next while having validation errors. The error popovers are shown.
2. I fix the validation errors. Click next and go to the next card.
3. I click back and go to the previous card. The error popovers are still there.

What do you think would be the most quick and efficient fix in this case?

I am having difficulty opening the modals in bootstrap 3. Right now the problem is that the div class has the class hide and in bootstrap 3, a modal with a class hide is, well, hidden. In bootstrap 2.3.2, it was shown....

Great project! Bootstrap 3 is made to be responsive, with a mobile first approach. I tried the demo on the panopta site, but resizing the window had no affect on the wizard. Is this being taken into account with the Bootstrap 3 upgrade? Thanks!

Bower is super convenient for installing web packages.

https://github.com/twitter/bower

The wizard should take an option for "formHorizontal" as bool, false as a the default value, allowing a better use of space.

The FORM tag generated by the wizard is a simple <form>, with no other properties. It would be nice (I think) to be able to specify an ID value for the form as part of the wizard initialization, for either styling or jQuery purposes. For instance, I'm having some problems with an ENTER key press submitting the form with a GET; I can turn off the ENTER activity with a bit of jQuery, but the current process of telling jQuery where to find the FORM tag is a little messy.

It seems there is no feature like a skip button for specified cards. I think that would be a good enhancement for the wizard, so that the users can see that some cards/entries are not mandatory

I need to be able to use this control inline the page, rather than in a modal popup. I was able to write some code to make it work, but it should be a simple option on the control instead.

Here is the workaround code doing some DOM hackery with jQuery:

// the usual setup
var element = $("#some-wizard");
var wizard = element.wizard(options);

// detach the internal rendered element
var el = wizard.el;
el.detach();

// tell boostrap not to render a backdrop
el.attr('data-backdrop', false);

// remove the close button
el.find('.wizard-close').remove();

// this keeps the box the right height during submittal
el.find('.wizard-buttons-container').css('height', '30px');

// set some properties to make it appear inline
el.css('position', 'static');
el.css('margin-top', '20px'); // could be zero, but this looks better
el.css('margin-left', 0);

// place it where it belongs
$(element).after(el);

// show it
wizard.show();

1. fix format errors
   wenzhixin@e06472b
2. fix error: IE8 console.log doesn't support the apply or call methods.
   wenzhixin@7c695ed

If you just want to modify the button text for 2 buttons by example, you do something like:
buttons: {
submitText: "Create",
submittingText: "Creating..."
}

However, there is a problem! The merging code used will replace the content of buttons by your datas removing the others values.

To fix this bug, you need to replace this code: $.extend(this.args, args || {});
by that: $.extend(true, this.args, args || {});

I think it will be great to fix this bug inside the source.

best regards

How can I call a command to go to the next card?

When a card is disabled the navigation link remains.

Current Status: Research

It's unknown if current situation "works as designed" Awaiting answer from author/contributors.

Hi,

First of all thanks for this nice wizard.
I found this wrong behaviour in the erroPopover function of the wizard. If you try to set two error popovers with different contents on the same element, the popover will always displays the first message.
I found this discussion on bootstrap twbs/bootstrap#813 (comment) ,and following what fat suggests i changed the bootstrap-wizard code to reset the popover content

    errorPopover: function(el, msg) {
        this.log("launching popover on", el);
        //resets popover data if a popover has been already instantiated for the element
        if(el.data('popover') != undefined) {
            el.data('popover', null);
        }

        var popover = el.popover({
            content: msg,
            trigger: "manual"
        }).popover("show").next(".popover");

        popover.addClass("error-popover");
        return popover;
    },

This fixed the problem for me.

Raffa

Add tabindex="-1" to the modal div otherwise escape keyboard action is not working:

Hello all.

I spent about an hour trying to figure out why zero validation functions (called at the card level or at the <input> level) were failing. They worked on previous cards, but never on the final card.

Is this something that can be looked at?

Thanks, this project is awesome.

David

When wizard have many steps, sidebar showed ugly. To fix this need to expand container style with rule:

.wizard-nav-container {
    overflow-y: scroll;
}

Hi, after clicking the first time on the wizard everything works fine. But if you close the wizard, them click again the cards are not loaded.

I'm calling:

'click .createNewStudyButton': function (evt) {
var newStudyWizard = $("#newStudyWizard").wizard({});
newStudyWizard.show();
}

How can you call a validate function on a card if it is the last step?
Since it is the last step the submit button is present so the validate function for this card does not get triggered.

wizard.cards["myCar"].on("validate", function(card) {

I am trying to open wizard using ajax call everytime, but after re opening wizard next and previous buttons are not working.
The following code is working fine for the first time, but when i reload the wizard (using same ajax call) with out page refresh it is not working.
How do I reinitialize the wizard with out refreshing the page?

I am loading the content based on dropdown selected value.

<select id="dropdown">
<option value="1">option1</option>
<option value="2">option2</option>
</select>
<div id="someid"></div>
$("#dropdown").change(function(){
var selectedvalue=$(this).val();
$.ajax({
url: '/someurl',
data:{value:selectedvalue} ,
success: function (data) {
$("#someid").html('');
$("#someid").empty();
$("#someid").html(data);
}
});
});
Ajax call is returning the below html content from the partial view (ASP.NET MVC)

<div class="wizard" id="wizard-demo">
<div class="wizard-card" data-cardname="card1" data-validate="validations">
//Content
</div>
<div class="wizard-card" data-cardname="card2" data-validate="validations">
//Content
</div>
<div class="wizard-success">
submission succeeded!
</div>
</div>

//===== JS code used inside the partial view==========
var wizard = $("#wizard-demo").wizard();
wizard.show();
wizard.on("submit", function (wizard) {
$.ajax({
url: '/submiturl',
type: "POST",
data: wizard.serialize(),
success: function (data) {
if (data != "True") {
wizard.submitSuccess(); // displays the success card
wizard.hideButtons(); // hides the next and back buttons
wizard.updateProgressBar(0);
wizard.reset();
},
error: function () {
wizard.submitError(); // display the error card
wizard.hideButtons(); // hides the next and back buttons
}
});
});

To access an element within the wizard. The version 2 code uses jquery find() within the wizard.el.

In v3, this is replaced by using the find() on wizard.modal.

This should be replaced by a wizard.find() function which redirects to jQuery find() and returns an modal.

Properties of the wizard should not be accessed directly.

Can't seem to get the form reset functions to do anything?

I wanted to reset the wizard after successful submission and have the reset working as expected when the close button is clicked...However, both of the following don't seem to do anything, regardless of where I place it (form submission, card selected, etc).

wizard.trigger("reset");
wizard.reset();

Settled on manually triggering a click on the close button for now.

The input field generated by the jquery chosen plugin integrated in the wizard creates a too small input box. I don't know where this is coming from. The example has the same problem.

The online hosted version (I think boostrap2) does not have the problem:
http://www.panopta.com/static/bootstrap-wizard-plugin/demo/demo.html

Hello all,

What headers or JSON need to be returned by the server to trigger wizard-failure and wizard-error? And what is the difference between failure vs error?

Also, returning 200 response from the server still activates the error card. What kinda of a header or JSON response does the wizard expect for success?

Could you please add this information to the documentation?

Unfortunately upon firing up the live demo in both Chrome & Chrome Beta for Android (on my Samsung Galaxy S3) I encounter the problem that once in a field I can't scroll around to see the other wizard steps or even the button I'm supposed to press to submit the form. Instead I have to keep zooming in & out to navigate around, which is very annoying indeed and makes it pretty much unusable in its present state, alas.

Hi,

I want to open a wizard based on which button is pressed.
So, i have used the following code:

$(".button").on('click',function(){
var id= $(this).data('btnid');
$("#wizard"+id).wizard().show();
});

But when i click on button -> close modal -> reopen the modal, the wizard content disappears, it just shows an empty wizard.

Hey, maintainer(s) of amoffat/bootstrap-application-wizard!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library amoffat/bootstrap-application-wizard is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "amoffat/bootstrap-application-wizard",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

this issue will stay open until bootstrap-3 is ready to merge. Just a heads up of what is going on. @gjrtimmer's work on bootstrap 3 has been merged into a bootstrap-3 branch where it can finish development. When it's done, master will branch to bootstrap-2 and bootstrap-3 will merge into master.

@bryancallahan
@che-burashco
@gjrtimmer

Hi I was looking for a wizard form and I found yours that is perfect !!.
I had to modify the CSS to make it no-modal and now I want to be able to click a nav-link (in the left) to go anywhere I want. But I can't figure out how to do that...

Can you help me ?

Thanks for your work !

Hi.
I was hoping it would be possible to hide some specific cards?

I want to use 1 wizard but for 3 different uses.

i.e

My form has 3 sections
CLIENT - PROPERTY - VEHICLE

I want to have 3 buttons that all open the same wizard, but each button shows different cards within the wizard.

for example

$("#open-wizard").click(function() {
wizard.show();
wizard.hidecard('PROPERTY');
wizard.hidecard('VEHICLE');
});

$("#open-wizard2").click(function() {
wizard.show();
wizard.hidecard('VEHICLE');
});

$("#open-wizard3").click(function() {
wizard.show();
});

Its is possible? i tried wrapping some card within a div, then hiding that... but it didnt work.
Any help?

How do I prevent the wizard from automatically closing when the user clicks anywhere else outside the wizard. I want this as a required form completion however since a user could theoretically click outside and close this I'd like to disable this.

Hello Andrew,

I just wanted to mark this as an issue because Bootstrap Modals are supported in IE7+ so this wizard should also be. I would be starting to work on it in a few days and would appreciate if we could together make it cross browser compatible.

In-case I get cornered with an issue - shall let you know!

Cheers!
Bagga

I was trying the demo here: http://www.panopta.com/static/bootstrap-wizard-plugin/demo/demo.html

If you get to step 3 or further, the progress meter (in the bottom left) stays at the furthest stage, not the one you are on. For example, If you go back to stage 2, the progress meter stays at stage 3. Shouldn't the progress meter adjust to what stage you are on? And not just the further point/stage you have gotten (what it currently does)?

With bootstrap 3, bootstrap-application-wizard no longer works.
Do you plan to adapt it to this new version ?

When serializing with jQuery, disabled inputs are not taken into account.

However, sometimes, for example with the demo, an input is disabled to disallow user modification why it does contain an value which should be serialized.

A normal jQuery workaround is to enable all inputs prior to serialization to include all disabled values.

Personally, I disagree with such a implementation, because input values which should not be serialized will end up into the serialization.

Proposal:
Add a data-serialize="1" or similair option to the input fields to include this inputs always when serializing when they are disabled or not.

for example, at the end of the wizard, there is no "create another" which restarts the wizard, or a "done" button

i think it may be best if we copied over the exact content of the old demo, into the new demo.

I get a min-height set on the element of 465px, I can't find where this is coming from

@che-burashco since you are the guy who introduced the feature, what are your thoughts on how easy this would be? If it's tricky, we can wait and add it later after the bootstrap 3 branch lands.

hi the validation for input fields is falling although the return value is true. I've try this to alert the result.

here's the issue.
http://stackoverflow.com/questions/17697943/bootstrap-form-wizard-validation-error

Option to configure a card to be skipped.

Proposal:
Adding a data-skip="1" attribute to a card root options in HTML.

On building a card the presence of this option is checked and a skip button is placed on the bottom toolbar.

The action of the skip button should be to ignore the validation of the card and go the the next card.