Can't get the Next / Back buttons to show about meteor-wizard HOT 18 CLOSED

Thank you so much!

I think I haven't updated the example app yet. However if you setup the wizard without any custom template the back button should be there.

If you use custom templates for the steps you can do something like this:

Template.wizardStep2.events({
  'click .back': function(e, template) {
    e.preventDefault();
    this.wizard.previous();
  }
});

Which version are you using?

from meteor-wizard.

I confirm I have the same issue, probably i'm not 100% sure that the wizard line is correct.
I'm using:
{{>wizard id="idWizardXZZ" steps=steps stepsTemplate="steps" backButton="true"}}
Am I right?

from meteor-wizard.

Can you post your steps configuration?

backButton is 'Back' by default, backButton="true" should render a back button with the text "true", and has to be a set to false if you want to hide it.
So omitting the backButton configuration should work if you don't use custom templates for your steps.

from meteor-wizard.

I just pushed a new version and updated the examples in the readme.

If you use custom templates for your steps you can now include {{> wizardButtons}} in your form to render back, next and confirm buttons, so you don't need to setup the event handlers etc yourself.

I also updated the example app repository and running version at http://autoform-wizard.meteor.com.

Good luck.

from meteor-wizard.

Thanks for your prompt support! However, what I'm seeing now is dumbfounding.

Here is my wizard:

<template name="order">
    {{> wizard id="order" steps=steps stepsTemplate="steps" buttonClasses="btn btn-primary"}}
</template>

Here is the first step:

<template name="marketInformation">
    <h2 class="m-t m-b">Market Information</h2>
    {{ > quickForm id="market-information-form" doc=this.data schema=Schema.marketInformation}}
</template>

The dumbfounding thing is that this first step renders with a "Submit" button, instead of a "Next" button. The "Submit" button behaves like a "Next" button for all I can tell, but I really can't figure out how to make it display "Next" on the button.

The second step display Back and Confirm buttons, so it works fine. It's just the first step button which is broken.

Here are the schemas for both steps:

Schema.marketInformation = new SimpleSchema({
    marketName: {
        type: String,
        label: 'Market',
        allowedValues: ['M1', 'M2'],
        autoform: {
            options: [{
                label: 'Market 1',
                value: 'M1'
            }, {
                label: 'Market 2',
                value: 'M2'
            }]
        }
    },
    player: {
        type: String,
        label: 'Point of View',
        allowedValues: ['P1', 'P2'],
        autoform: {
            options: [{
                label: 'Player 1',
                value: 'P1'
            }, {
                label: 'Player 2',
                value: 'P2'
            }]
        }
    },
});

Schema.idealSystems = new SimpleSchema({
    idealSystems: {
        type: Array,
        optional: false
    },
    "idealSystems.$": {
        type: String,
        optional: false,
        autoform: {
            afFieldInput: {
                type: "textarea"
            }
        }
    }
});

from meteor-wizard.

PS: I really appreciate you updating the example, but as far as I can tell, the source code at https://github.com/forwarder/meteor-wizard-example has not been updated -- am I looking at the wrong repository?

from meteor-wizard.

Forgot to push the changes, it's on Github now :)

Ok, thanks for posting your code, i see the problem.

You're using a custom template with a standard quickForm, which will always render a submit button only, because this is not part of the wizard package.

What you have to do is something like this.

<template name="marketInformation">
    <h2 class="m-t m-b">Market Information</h2>
    {{#autoForm id="market-information-form" doc=this.data schema=Schema.marketInformation}}
        /* your fields here, for example using {{> afQuickFields}} 
           or add individual fields {{> afQuickField name='fieldname'}} */
        {{> wizardButtons}}
    {{/autoForm}}
</template>

from meteor-wizard.

Ah, yes, well, that's where it gets really freaky :) I already tried that -- I get a strange text to json error (will paste it here later), which goes away ONLY if my first step scheme is an array of any type.

To replicate this behavior, use the template you provided with the schemas -- you should get the error. Now replace the first step schema with the second step schema (or any array based schema you want) -- the error goes away, the Next button is there, everything is fine!

from meteor-wizard.

Following up on this -- the exact error that I get when using your suggestion is:

Exception from Tracker recompute function:
debug.js:41 Error: Unexpected object in htmljs in toText: [object Object]
    at HTML.ToTextVisitor.def.visitObject (visitors.js:240)
    at HTML.Visitor.def.visit (visitors.js:61)
    at Object.HTML.toText (html.js:259)
    at Object.Blaze._toText (view.js:720)
    at updateAttributes (materializer.js:129)
    at view.js:191
    at Function.Template._withTemplateInstanceFunc (template.js:437)
    at view.js:190
    at Object.Blaze._withCurrentView (view.js:523)
    at viewAutorun (view.js:189)

The template I use is:

<template name="marketInformation">
    <h2 class="m-t m-b">Market Information</h2>
    {{#autoForm id="market-information-form" doc=this.data schema=Schema.marketInformation}}
        {{> afQuickFields}}
        {{> wizardButtons}}
    {{/autoForm}}
</template>

The schema that I use when I get the error is:

Schema.marketInformation = new SimpleSchema({
    marketName: {
        type: String,
        label: 'Market',
        allowedValues: ['M1', 'M2'],
        autoform: {
            options: [{
                label: 'Market 1',
                value: 'M1'
            }, {
                label: 'Market 2',
                value: 'M2'
            }]
        }
    },
    player: {
        type: String,
        label: 'Point of View',
        allowedValues: ['P1', 'P2'],
        autoform: {
            options: [{
                label: 'Player 1',
                value: 'P1'
            }, {
                label: 'Player 2',
                value: 'P2'
            }]
        }
    },
});

BUT, if I change the schema to:

Schema.marketInformation = new SimpleSchema({
    marketName: {
        type: Array,
        optional: false
    },
    "marketName.$": {
        type: String,
        optional: false,
        autoform: {
            afFieldInput: {
                type: "textarea"
            }
        }
    }
});

then everything works just fine! No error, the Next button is there, etc.

Open to any suggestions you might have, I'm tearing my hair out on this one.. :)

from meteor-wizard.

Haha I bet you do, that error message is Autoform related I think.

Try to remove the Autoform config from your schema as see what happens.
Do you use any other Autoform plugins?

Did you try to render the form without the wizard?

from meteor-wizard.

I tried removing the Autoform config from the schema -- same behavior.

If I render the form without the wizard, it works just fine. To be more specific:

This works fine, no error:

<template name="order">
    {{#autoForm id="market-information-form" doc=this.data schema=Schema.marketInformation}}
        {{> afQuickFields}}
    {{/autoForm}}
</template>

This doesn't work, the error appears, which makes me think it's wizard related, rather than autoform related:

<template name="order">
    {{> wizard id="order" steps=steps stepsTemplate="steps" buttonClasses="btn btn-primary"}}
</template>

<template name="marketInformation">
    {{#autoForm id="market-information-form" doc=this.data schema=Schema.marketInformation}}
        {{> afQuickFields}}
        {{> wizardButtons}}
    {{/autoForm}}
</template>

More information:

Template.order.helpers({
    steps: function() {
        return [{
            id: 'market-information',
            title: 'Market',
            template: 'marketInformation',
            schema: Schema.marketInformation
        }, {
            id: 'ideal-systems',
            title: 'Ideal Systems',
            template: 'idealSystems',
            schema: Schema.idealSystems,
            onSubmit: function(data, wizard) {
                console.log(wizard.mergedData());
            }
        }];
    }
});

Schemas below -- just as mentioned above, the problem disappears if the schema of the first step is an Array of anything. Very weird.

Schema = {};

Schema.marketInformation = new SimpleSchema({
    marketName: {
        type: String,
        label: 'Market',
        allowedValues: ['M1', 'M2'],
        autoform: {
            options: [{
                label: 'Market 1',
                value: 'M1'
            }, {
                label: 'Market 2',
                value: 'M2'
            }]
        }
    },
    player: {
        type: String,
        label: 'Point of View',
        allowedValues: ['P1', 'P2'],
        autoform: {
            options: [{
                label: 'Player 1',
                value: 'P1'
            }, {
                label: 'Player 2',
                value: 'P2'
            }]
        }
    },
});

Schema.idealSystems = new SimpleSchema({
    idealSystems: {
        type: Array,
        optional: false
    },
    "idealSystems.$": {
        type: String,
        optional: false,
        autoform: {
            afFieldInput: {
                type: "textarea"
            }
        }
    }
});


Concepts.attachSchema([
    Schema.marketInformation,
    Schema.idealSystems
]);

from meteor-wizard.

Thanks for the extra info, I'll try to reproduce it tomorrow.

I copied your schema to the example app and it's running fine here.

• Which meteor and autoform versions do you use?
• Do you use any other AutoForm plugins?

from meteor-wizard.

Here are all the packages currently used:

aashu28:jquery-steps          0.0.7
accounts-password             1.1.1
alanning:roles                1.2.13
aldeed:autoform               5.1.2
aldeed:collection2            2.3.3
anti:fake                     0.4.1
cmather:handlebars-server     0.2.0*
cunneen:mailgun               0.9.1
dburles:collection-helpers    1.0.3
dburles:factory               0.3.9
forwarder:autoform-wizard     0.6.4
iron:router                   1.0.7
less                          1.0.14
matb33:collection-hooks       0.7.11
meteor-platform               1.2.2
momentjs:moment               2.10.2*
mrt:underscore-string-latest  2.3.3
reywood:publish-composite     1.3.6
semantic:ui-css               1.11.7
useraccounts:bootstrap        1.8.1
yasinuslu:blaze-meta          0.3.1
zimme:iron-router-active      1.0.1*

Thanks!

from meteor-wizard.

Wow, that's quite strange. Now I'm really vexed :) You can see all the packages and their versions above. Happy to do whatever debugging you think would be useful on my end, but I don't know what else to try.

from meteor-wizard.

Alright, I was able to reproduce your problem. I'm not sure yet why this is happening, I'll dive into it later.

if you change this line

    {{> afQuickFields}}

to

   {{#each afFieldNames}}
      {{> afQuickField name=this.name options=afOptionsFromSchema}}
   {{/each}}

The form will render correctly, hope this helps for now.

from meteor-wizard.

Glad to hear -- I'm really wondering what could be causing such a strange error.

Thanks for the workaround, it works great!

from meteor-wizard.

Also, I believe you meant replacing {{> afQuickFields}} rather than {{> afQuickForm}} -- for reference if anyone else reads this and needs the workaround.

from meteor-wizard.

Oh, you're right, late hours ;)

I'll keep this thread updated when i figured out what's going on.

from meteor-wizard.