Why does this code not only fail to visiblize my HTML "column" but also move to the next template (wrap around)?


#1

I am trying to create a “wizard” type of app, where the first template is shown first, then, after the user selects the “Next” button, they go to the next template, etc.

It works until I get to what is currently the final template, where I also have an “Add Another Date” button which, when clicked, should make visible a “column” of tds/cells that are hidden.

Not only does the visiblizing not take place, though, but the next template (#1, “wrapping around” to the beginning) displays. I tried adding a call to “stopPropagation()” in case the Submit button was somehow being executed, but that did nothing to prevent this behavior.

Here is the pertinent code:

if (Meteor.isClient) {
  // stepNum starts at 1
   Session.setDefault('stepNum', 1);
   Session.setDefault('nextDate', 1);

   Template.postTravelWizard.helpers({
        getStepTemplate: function () {
            var step = Session.get('stepNum');
            switch (step) {
                case 4:
                  return 'tblExpenseDescription'
                  break;
                case 3:
                    return 'tblPayments'
                    break;
                case 2:
                    return 'tblTravelerInfo2';
                    break;
                default:
                    return 'tblTravelerInfo'
                    break;
            }
        }
    }); // Template.postTravelWizard.helpers

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

            if ($('#visitor').is(':checked')) {
                console.log('visitor is checked');
                var visaselection =  $('select[name="selvisatype"]').val()
                console.log('visaselection is ' + visaselection);
                // When this is working (the first two return "visaselection is undefined" and the last one returns simply
                // "visaselection is "), do something similar for ucemployee (input type=radio) and selectcampus (select element)
            }
        },
        'change .payments' : function(event){
          var paymentTot = $('#paymenttotal').val();
          paymentTot = parseInt(paymentTot) || 0;
          var targetVal = $(event.target).val();
          targetVal = parseInt(targetVal);
          paymentTot = paymentTot + targetVal;
          $('#paymenttotal').val(paymentTot);
        },
        'click #addDate': function(event){
           event.preventDefault();
           var nextD8 = Session.get('nextDate');
           nextD8 = ++nextD8;
           Session.set('nextDate', nextD8);

           if (nextD8 == 2) {
              $("#date2").removeClass("hide");
              $("#airfare2").removeClass("hide");
              $("#pcm2").removeClass("hide");
              $("#reimbursemlg2").removeClass("hide");
              $("#rcei2").removeClass("hide");
              $("#ot2").removeClass("hide");
              $("#parktolls2").removeClass("hide");
              $("#confreg2").removeClass("hide");
              $("#lodging2").removeClass("hide");
              $("#mealsandI2").removeClass("hide");
              $("#foreignanddomestic2").removeClass("hide");
              $("#miscandenter2").removeClass("hide");
              $("#totals2").removeClass("hide");
           }
           event.stopPropagation();
        } // 'click #addDate': function(event){
    }); // Template.postTravelWizard.events
} // if (Meteor.isClient)

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

HTML:

{{> postTravelWizard}}
{{> Template.dynamic template=getStepTemplate}}

The elements I’m trying to visiblize via removeClass (they invisiblize/hide fine with the CSS/HTML) are of this pattern:

Date 2: 

CSS:

.hide {
  visibility: hidden;
  display: none;
}

Why does selecting the “Add Another Date” not only fail to show the elements such as “date2” and its brethren, but also jump jerkily forward to the next (first) template?

Note: The act of putting a breakpoint on the submit button click’s “e.PreventDefault” line ALSO causes template navigation to revert back to the first template each time I click “Next” - but only when the breakpoint is there. Without it, it moves as desired from tblTravelerInfo to tblTravelerInfo2 to tblPayments to tblExpenseDescription.

Is making the “Next” button a “Submit” button a mistake? I did so because I will be saving data each time (when leaving one template and moving to the next), but that’s not really necessary (the “Next” button being of type “Submit”), I guess. Is it problematic?

UPDATE

For some reason, if I change the input of type submit to a button, the wrap-around from the last template to the first no longer happens when I select “Add Another Date” on the last template (good!).

The .js has changed like so:

    Template.postTravelWizard.events({
        'click #nextStep': function (e, t) {
            // e.preventDefault();

…and the HTML like so:

Next

However, it still does not make visible the “column”. Do I need to call “invalidate” or some such to refresh the page?