Within my Meteor application, I utilize Template.dynamic to seamlessly replace the current Template with the next one. In my "main" html file, the setup looks like this:
<div class="container">
{{> postTravelWizard}}
</div>
</body>
<template name="postTravelWizard">
{{> Template.dynamic template=getStepTemplate}}
<button type="button" name="nextStep" id="nextStep">Next</button>
</template>
Furthermore, here is the relevant JavaScript code:
Session.setDefault('stepNum', 1);
Template.postTravelWizard.helpers({
getStepTemplate: function () {
var step = Session.get('stepNum');
switch (step) {
case 5:
return 'tblFundOrgAccountActivityAmount';
break;
case 4:
return 'tblExpenseDescription';
break;
case 3:
return 'tblPayments';
break;
case 2:
return 'tblTravelerInfo2';
break;
default:
return 'tblTravelerInfo';
break;
}
}
}); // Template.postTravelWizard.helpers
Although this functionality works well, there is an issue with the HTML Table "columns". Despite applying the "hide" class to certain elements to hide them:
<template name="tblExpenseDescription">
<button type="button" name="addDate" id="addDate">Add another Date</button>
. . .
</template>
...the columns do not unhide when the "Add Another Date" button is clicked. The CSS class used to hide these elements is defined as follows:
.hide {
visibility: hidden;
display: none;
}
Upon clicking the "Add Another Date" button, it should reveal the next hidden column. However, the following code does not achieve the desired result:
Session.setDefault('nextDate', 1);
. . .
Template.postTravelWizard.events({
'click #addDate': function(event){
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");
}
}
});
Despite no error messages, removing the "hide" class from these elements does not change their visibility. Why might this be?