Can't move to other steps in wizard in both click events and programmatically after Hard page refresh

[sibinx7]

I have a wizard, i which I can add data, it only accept first 2 step at morning, and users can fill remaining data later. If i enter data and logout, then come back again it show the last step ( 2 or 3rd step depend upon users input, if they fill 2, i need to show 2nd step). This working fine but if i am referesh page ( ctrl +R) or use another browser, it show first page eventhough i have filled something. Please check screenshots

After hard refresh/ new browser ( 2 fields are already filled, check left sidebar), If i press next ( first step), then second step show empty field

After finishing some input, logout, then came back, then it work, it show all filled data.

I use autoform inside this wizard

Template : Wizard

<template name="addTaskForm">
    <div class="col-md-8">
      <!-- Example Wizard Accordion -->
      <div class="margin-bottom-30">
        <div class="panel-group" id="exampleWizardAccordion" aria-multiselectable="true"
             role="tablist">
          {{> wizard id="daily-task" route="addDailyTask"
            steps=steps stepsTemplate="wizardTop"
            buttonClasses="btn btn-md btn-primary ui button"
            persist=false
            clearOnDestroy= true
          }}
        </div>
      </div>
      <!-- End Example Wizard Accordion -->
    </div>

</template>

Template : Forms inside Widget

<template name="wizardWidget">
  {{#each iterateSteps}}
    {{#if iterateQuestions }}
      <div class="panel">
        <div class="panel-heading" id="exampleHeading1" role="tab">
          <a class="panel-title" >
            {{getCurrentTitle this.wizard id}}
          </a>
        </div>
      </div>
    {{else}}
      <div class="panel">
        <div class="panel-heading" id="exampleHeading3" role="tab">
          <h4>
            {{getCurrentTitle this.wizard id}}
          </h4>
        </div>
        <div class="panel-collapse" id="exampleCollapse3" aria-labelledby="exampleHeading3"
             role="tabpanel">
          <div class="panel-body">
            {{#autoForm  id=(formId) schema=schema doc=getLastOne resetOnSuccess=false}}
              {{> afQuickField name=(id) type="textarea"}}
            <div class="form-group clearfix">
              {{> wizardButtons}}
            </div>
            {{/autoForm}}

          </div>
        </div>
      </div>
    {{/if }}
  {{/each}}
</template>

wizardWidget Javascript

Template.wizardWidget.helpers({
  getCurrentTitle: function(wizard,id){
    var titleArray = [
      "What are you working on?",
      "Quantify(specify)",
      "What did you achieve?",
      "What slowing your progress?",
      "What will help you reslove it?/ what help you to reslove it?",
      "What are you going to work on tomorrow?"
    ]
    var currentPosition = wizard._stepsByIndex.indexOf(id);
    return titleArray[currentPosition]
  },
  iterateQuestions: function(){
    return this.id != this.wizard._activeStepId
  },
  iterateSteps: function(){
    return this.wizard.steps
  },
  getLastOne: function(){
    var todayDate = moment().format('DD/MM/YYYY');
    var getLatestOne =  Tasks.findOne({
      date: todayDate,
      user_id: Meteor.userId()
    },{
      fields : {
        working_for: 1,
        quantify: 1,
        achieved: 1,
        resolve: 1,
        slow_down: 1,
        tomorrow: 1
      }
    });
    console.log(getLatestOne)
    if(typeof getLatestOne!="undefined" && getLatestOne!=null){
      return getLatestOne

    }else{
      return null
    }
  }
})
Template.wizardWidget.onCreated(function(){
  window.wizard = this.data.wizard;
  var _this =  this;
  var todayTaskExist = Tasks.find({
    date: moment().format('DD/MM/YYYY'),
    user_id: Meteor.userId()
  })
  var newObject  = _.extend()
  if(todayTaskExist.count() > 0 ){
    var todayTask = todayTaskExist.fetch()[0];
    var todayTaskOnly = _.omit(todayTask,['_id','user_id', 'user', 'completed','late','date','timestamp']);
    var todayTaskUpdated = _.extend({
      'tomorrow':"",
      'resolve':"",
      'slow_down':"",
      'achieved':"",
      'quantify':"",
      'working_for':""
    }, todayTaskOnly);
    for(var task in todayTaskUpdated){
      if(task=='tomorrow' && todayTask[task]!=""){
        this.data.wizard.show(task);
        break;
      }
      if(task=='resolve' && todayTask[task]!=""){
        this.data.wizard.show(task);
        break;
      }
      if(task=='slow_down' && todayTask[task]!=""){
        this.data.wizard.show(task);
        break;
      }
      if(task=='achieved' && todayTask[task]!=""){
        this.data.wizard.show(task);
        break;
      }
      if(task=='quantify' && todayTask[task]!=""){
        this.data.wizard.show(task);
        break;
      }
      if(task=='working_for' && todayTask[task]!=""){
        this.data.wizard.show(task);
        break;
      }
    }
  }
  /**
   * Disable next button in second step, if time less than 11:00 AM
   *
   */
  if(moment().hour() < 11 && todayTaskExist.count() > 0){
    $('#quantify-form').find('.wizard-next-button').attr('disabled','disabled');
  }
});

Template.wizardWidget.events({
  'click .wizard-back-button': function(){
    if(moment().hour() < 11){
      $('#quantify-form').find('.wizard-next-button').attr('disabled','disabled');
    }
  }
})

[Pagebakers]

Hey, thanks for the elaborate explanation.

Can you also add the js code for the addTaskForm template?

[sibinx7]

Thanks for your quick reply

This plugin save lots of time, thank you very much.

Javascript

/**
 * Created by Sibin Xavier on 2/10/2016.
 */

Meteor.startup(function(){
  Wizard.useRouter('kadira:flow-router');

  Template.addTaskForm.onCreated(function(){
    Schemas.workingFor = new SimpleSchema({
      working_for:{
        type: String,
        label:'Working For'
      }
    });
    Schemas.Quantify = new SimpleSchema({
      quantify: {
        type: String,
        label: 'Quantify'
      }
    });
    Schemas.Achieve = new SimpleSchema({
      achieved: {
        type: String,
        label: 'Achieve'
      }
    });
    Schemas.SlowDown = new SimpleSchema({
      slow_down: {
        type: String,
        label: 'Slow Down'
      }
    });
    Schemas.Resolve = new SimpleSchema({
      resolve: {
        type: String,
        label: 'Resolved'
      }
    });
    Schemas.Tomorrow = new SimpleSchema({
      tomorrow:{
        type: String,
        label:'Tomorrow'
      }
    });
    Tasks.attachSchema([
      Schemas.workingFor,
      Schemas.quantify,
      Schemas.Achieve,
      Schemas.SlowDown,
      Schemas.Resolve,
      Schemas.Tomorrow
    ]);
  });
});

Template.addTaskForm.helpers({
  steps: function(){

  var todayDate = moment().format('DD/MM/YYYY');
  var getLatestOne =  Tasks.findOne({
    date: todayDate,
    user_id: Meteor.userId()
  },{
    fields : {
      working_for: 1,
      quantity: 1,
      achieved: 1,
      resolve: 1,
      slow_down: 1,
      tomorrow: 1
    }
  });
    return [
      {
        id:'working_for',
        title:'Working On',
        schema: Schemas.workingFor,
        data: getLatestOne,
        formId:'working_for-form',
        template: 'wizardWidget',
         onSubmit: function(data, wizard){
          saveOrUpdateWizard(data,wizard)
           wizard.next(data)
         }
      },
      {
        id: 'quantify',
        title: 'Quantify',
        schema: Schemas.Quantify,
        data: getLatestOne,
        formId:'quantify-form',
        template: 'wizardWidget',
         onSubmit: function(data,wizard){
           saveOrUpdateWizard(data,wizard);
           // if time is less than 11:00 AM, then
           // redirect to home page, else
           // continue 
           if(moment().hour() > 11){
             wizard.next(data)
           }else{
             wizard.show('quantify')
           }

         }

      },
      {
        id: 'achieved',
        title: 'Achieved',
        schema: Schemas.Achieve,
        data: getLatestOne,
        formId: 'achieved-form',
        template: 'wizardWidget',
         onSubmit: function(data, wizard){
           saveOrUpdateWizard(data,wizard)
           wizard.next(data)
         }
      },
      {
        id: 'slow_down',
        title: 'Slow Down',
        schema: Schemas.SlowDown,
        data: getLatestOne,
        formId:'slow_down-form',
        template: 'wizardWidget',
         onSubmit: function(data, wizard){
           saveOrUpdateWizard(data,wizard)
           wizard.next(data)
         }
      },
      {
        id: 'resolve',
        title: 'Resolve',
        schema: Schemas.Resolve,
        data: getLatestOne,
        formId: 'resolve-form',
        template: 'wizardWidget',
        onSubmit: function(data, wizard){
          saveOrUpdateWizard(data,wizard)
          wizard.next(data)
        }
      },
      {
        id: 'tomorrow',
        title: 'Tomorrow',
        schema: Schemas.Tomorrow,
        data: getLatestOne,
        formId: 'tomorrow-form',
        template: 'wizardWidget',
        onSubmit: function(data, wizard){
          var complete_data =_.extend(wizard.mergedData(),data);
          Meteor.call('saveTask',complete_data, Meteor.user(), function(err, result){
            if(typeof result!="undefined" && result!=""){
              FlowRouter.go('/')
            }
          })
        }
      }
    ]
  }
});
saveOrUpdateWizard = function(data, wizard){

  var completeData = _.extend(wizard.mergedData(), data)
  Meteor.call('saveTask', completeData, Meteor.user(), function(err, result){
   if(result){
    // result
   }
    if(err){
      console.log(err)
    }
  })
};

When i set data to each steps it now working ( i'm not sure, sometime it won't work ),

Live Demo : teamreporter.herokuapp.com ( old code without data attribute on each step)

Also i'm very new to meteor, not an expert...

[Pagebakers]

Did you manage to solve the problem?

[sibinx7]

@Pagebakers

 var getLatestOne =  Tasks.findOne({
    date: todayDate,
    user_id: Meteor.userId()
  },{
    fields : {
      working_for: 1,
      quantity: 1,
      achieved: 1,
      resolve: 1,
      slow_down: 1,
      tomorrow: 1
    }
  });
    return [
      {
        id:'working_for',
        title:'Working On',
        schema: Schemas.workingFor,
        data: getLatestOne,
        formId:'working_for-form',
        template: 'wizardWidget',
         onSubmit: function(data, wizard){
          saveOrUpdateWizard(data,wizard)
           wizard.next(data)
         }
      }]

getLatestOne getLatestOne = Last filled data ( daily task of user )

I have added data property for each step, now i think it working( lgetLatestOne), it working.

If i add doc = data (same data, in autoform ), I think it only work if we don't do hard refresh or use any new browser ( After filling fields, if i use any other browser or open a tab in private mode, it won't work but it work after i adding data property for each step).

Thanks for your valuable support.