How can I get my form's main div to "refresh"?


#1

I’m trying to create a wizard type experience with Meteor. I asked a question about it here and am trying that very code as a proof-of-concept, but how do I get the spacebars code in the whizzardBlizzard template to run again, so that each click of the Submit button will replace the prior template with the next?

As of now, runningn it displays the “Thirteen Ways of Looking at a Duckbilled Platypus” H2 text at the top of the page, and the “Submit” button below that, but clicking that button causes no difference - I don’t see “Step 1”, “Step 2”, etc.

What am I missing here, or am I completely on the wrong track?

Here is my HTML:

 
   Post Travel, Wizard Style
 

 
 

Thirteen Ways of Looking at a Duckbilled Platypus



{{> whizzardBlizzard}}
{{#if firstStep}} {{> firstStepTemplate}} {{/if}} {{#if secondStep}} {{> secondStepTemplate}} {{/if}} {{#if thirdStep}} {{> thirdStepTemplate}} {{/if}}

Step 1

Step 2

Step 3

…and the js:

if (Meteor.isClient) {
   // counter starts at 0
   Session.setDefault('step', 1);

   Template.whizzardBlizzard.events({
       "submit form": function (event) {
           //event.preventDefault();
           // save the vals to a new document in a collection
           Session.set('stepNum', Session.get('stepNum') + 1);
       }
   });

   Template.whizzardBlizard.helpers({
      firstStep: function() {
          return (Session.get('stepNum') == 1);
      },
      secondStep: function() {
          return (Session.get('stepNum') == 2)
      },
      thirdStep: function() {
          return (Session.get('stepNum') == 3)
      }
      // . . .  etc.
   });

 }

 if (Meteor.isServer) {
   Meteor.startup(function () {
     // code to run on server at startup
   });
 }
 

#2

Hi, something like this :smile:

<template name="whizzardBlizzard">
    <form>
        {{> Template.dynamic template=getStepTemplate}}
        <input type="submit" value="Submit" class="button">
    </form>
</template> 

<template name="firstStepTemplate">
    <h2>Step 1</h2>
</template>
<template name="secondStepTemplate">
    <h2>Step 2</h2>
</template>
<template name="thirdStepTemplate">
    <h2>Step 3</h2>
</template>

Session.setDefault('step', 1);
Template.whizzardBlizzard.helpers({
        getStepTemplate: function () {
            var step = Session.get('step');
            switch (step) {
                case 3 :
                    return 'thirdStepTemplate'
                    break;
                case 2 :
                    return 'secondStepTemplate';
                    break;
                default:
                    return 'firstStepTemplate'
                    break;
            }
        }
    })

Template.whizzardBlizzard.events({
        'click [type=submit]': function (e, t) {
            e.preventDefault();
            //save something...
            var step = Session.get('step'),
            step = (step) < 3 ? ++step : 1;
            Session.set('step', step);
        }
});

#3

Perfect; works like a charm bracelet.