Why is this Javascript not updating my page (hiding/showing templates)?

help
1

I have many templates on my page, which are sequentially shown one at a time, in “wizard” fashion, as the user moves through it. The first template (displayed at the beginning) starts off without the “hide” class, but all the others have it. The class is:

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

All templates besides the initial one use the class, like so:
. . .

When a “Next” button is clicked at the bottom of the page, I’m trying to hide the current template and show the next one like so:

    'click #buttonNext': function(event) {
      var curStep = Session.get('currentStep');
      switch(curStep) {
        case 1:
          Session.set('currentStep', 2);
          $('#tableTravelerInfo').addClass('Hide');
          $('#tableTravelerInfo2').removeClass('Hide');
        break;

…but it doesn’t work. Stepping though the code, “curStep” is “1” (as expected at first), and so the block above is executed, but the current template (“tableTravelerInfo”) is not hidden, nor is the next one (“tableTravelerInfo2”) shown. Why not?

If you want more context, here is some of the .html file:

      . . .
      

        {{> templatizer}}
      

    
    
    
    
      
        {{> tblTravelerInfo}}
        {{> tblTravelerInfo2}}
        {{> tblPayments}}
        {{> tblExpenseDescription}}
        {{> advisoryNotices}}
        {{> tblFundOrgAccountActivityAmount}}
        Next

…and the .js file:

    if (Meteor.isClient) {
      Session.setDefault("currentStep", 1);
      . . .

Why does adding the “Hide” class not hide “tableTravelerInfo” and, similarly, why does removing the “Hide” class not display the “tableTravelerInfo2” template?

2

Sometimes it’s the simple things Hide <> hide

.addClass(‘hide’);

:smile:

Best to try out JQuery stuff in the browser console.

1 Like
3

I for one think that you are actually mixing Meteor’s template paradigm with regular Javascript DOM manipulation.

If you wanted to step through templates in meteor, you probably should look into {{>UI.dynamic template=selectedTemplate}} where selectedTemplate will simply provide the name of the template to be shown. That way you can retain all of the Blaze magic and don’t have to fiddle with hidden …

Template.wizard.onCreated(function(){
 this.step = new ReactiveVar("one");
});
Template.wizard.helpers({
 wizardStep: function() {
  var self = Template.instance();
  return self.step.get();
 }
});
Template.wizard.events({
 'click a.next': function(e,t) {
  t.step.set("two");
 }
});

<template name="wizard">
  <a href="#" class="next">Next</a>
  {{>UI.dynamic template=wizardStep}}
</template>
<template name="one">
 <h1>Step One</h1>
</template>
<template name="two">
 <h2>Step Two</h2>
</template>
4

:confounded:
Glad that it now works; irritated with myself that I didn’t notice that. Is there a word for that feeling? Glambarrassed? Embarglad?

5

Thanks; the reason I’m doing it this way, though, is that I’m using Meteor as a prototyping tool for what will have to end up as a SharePoint WebPart, and I think I can do this with Sharepoint (the show/hide jazz), but don’t know about replacing WebParts or programmatically moving from one WebPart to another.

My “home” project will remain Meteor, but this project is a “funner” way to work on a Sharepoint solution.