Still working?

[luixal]

Hi,

I've just tried this package in a project using autoform 5.8.1 and autoform-wizard 0.9.1 and it doesn't through any error but it doesn't render correctly.

I'm just following examples including this into html code:

{{> wizard id="basic-wizard" steps=steps}}

and using this helper:

'steps': function() {
    return [
       {
         id: 'first',
         title: 'First',
         schema: userCountrySchema,
         onSubmit: function(data, wizard) {
           console.log('First:');
           console.log(data);
           console.log(wizard);
         }
       },
       {
         id: 'second',
         title: 'Second',
         schema: userProfileSchema,
         onSubmit: function(data, wizard) {
           console.log('Second:');
           console.log(data);
           console.log(wizard);
         }
       },
       {
         id: 'third',
         title: 'Third',
         schema: rolesSchema,
         onSubmit: function(data, wizard) {
           console.log('Third:');
           console.log(data);
           console.log(wizard);
         }
       }
    ];
  }

where the schemas are valid as a common autoform shows them right and work smoothly.

The HTML rendered is this one (showing a plain list with the steps, fields for the first step and a send button that once pressed, it does nothing):

<div id="basic-wizard" class="wizard">
   <div class="steps">
      <ol>
         <li class="active">
            First
         </li>
         <li class="">
            Second
         </li>
         <li class="">
            Third
         </li>
      </ol>
   </div>
   <div class="wizard-step">
      <form id="first-form" novalidate="novalidate">
         <div class="form-group" data-required="true">
            <label for="45rdSjmtXKKE9yXZq" class="control-label">Nombre</label>
            <input type="text" name="name" id="45rdSjmtXKKE9yXZq" required="" data-schema-key="name" class="form-control">
            <span class="help-block"></span>
         </div>
         <div class="form-group" data-required="true">
            <label for="TWSZrdfLhgZanoJHb" class="control-label">Código</label>
            <input type="text" name="code" id="TWSZrdfLhgZanoJHb" required="" data-schema-key="code" class="form-control">
            <span class="help-block"></span>
         </div>
         <nav class="wizard-nav">
            <button type="submit" class="wizard-next-button" disabled="">Enviar</button>
         </nav>
      </form>
   </div>
</div>

Any ideas on what problem am I facing?

Thanks!

[Pagebakers]

Sorry for the late response, not getting any notifications once again :(

You're using a custom onSubmit handler in all the steps, only use this for the last step or do this:

onSubmit(data, wizard) {
  wizard.next(data) // this will trigger the next step and store data from the current step.
}

[luixal]

Oh, that makes sense. I was thinking that onSubmit was called and then the wizard.next was also called automatically by the package. Will give it a try.

Is this related to the CSS not working properly (my app uses bootstrap) or do I need another package for styling?

Thanks!

[Pagebakers]

Yep that's by design, bootstrap is used by default for the form thanks to autoform but I've kept the wizard itself neutral. You can add a theme easily see the example: https://github.com/forwarder/meteor-wizard-example/tree/master/client