Button colour is not changing on reload

Question

By default the current date button (the first button) should display in blue. When it's clicked other buttons should have a grey color and the current button should have a blue color.

It is working for the first time when rendered and after a reload the color of the button is not working.

Template.agendaPage.helpers({
    'getDateFilters': function() {
      var allDays = Session.get('allDays')
      allDays = allDays.map(function(val) {
        return moment(val).format("MMM DD")
      })
      return allDays;
    },
  })

  Template.agendaPage.events({
    'click .dateFilter': function(event) {
      var bgclr;
      var id = $(event.target).attr('data-index');
      var allDays = Session.get('allDays');
      Session.set('currentDay', allDays[id]);
      $('.dateFilter').css({
        "background-color": "#575757"
      });
      $(`.dateFilter[data-index=${id}]`).css({
        "background-color": "#0091FF"
      });
    },
  })

  Template.agendaPage.rendered = function() {
    var _this = this;
    Meteor.setTimeout(function() {
      var dayObj = {}
      var days = []
      var startDay = ''
      var eventId = Session.get('data-event-id');
      var orgId = Session.get('data-organisation-id');
      var sessions = Content.find({
        eventId: eventId,
        orgId: orgId
      }, {
        sort: {
          "sessionStartTime": 1
        }
      }).fetch();
      var eventData = Events.findOne({
        "eventId": eventId
      })
      sessions.forEach(function(content, index, sessionArray) {
        if (content.sessionStartTime) {
          var startime = content.sessionStartTime.toString()
          var dayformat = moment(startime).format("dddd, MMM DD YYYY")
          if (dayObj.hasOwnProperty(dayformat)) {
            dayObj[dayformat].push(content)
          } else {
            dayObj[dayformat] = []
            dayObj[dayformat].push(content)
          }
          if (!startDay) {
            startDay = dayformat
          }
          if (days.indexOf(dayformat) == -1) {
            days.push(dayformat)
          }
        }
      })
      Session.set('dayObj', dayObj)
      Session.set('allDays', days)
      Session.set('currentDay', startDay)
      Session.set("track", "all")
      Session.set("trackDes", "all")
      var allDates = Object.keys(Session.get('dayObj'))
      if (allDates.length == 1) {
        $('.next-day').attr('disabled', "")
      } **
      $('.dateFilter[data-index=0]').css({
        "background-color": "#0091FF"
      }); **
    }, 300)
    Meteor.setTimeout(function() {
      if ($('.eventBanner').length == 0) {
        $('.agedaTitle').css("margin-top", "100px")
      }
    }, 1000)
  }

{{#if getDateFilters}} 
  {{#each getDateFilters}}
    <button type="button" data-index="{{@index}}" class="btn btn-primary btn-sm dateFilter" style="border-radius: 12.5px;font-size: 12px;width: 99px;font-family: TTCommons-Regular;letter-spacing: 0px;font-weight: bold;height: 25px;background-color: #575757;line-height: 14px;float: left;margin-left: 20px;outline: none;border: none;">{{this}}</button>
  {{/each}} 
{{/if}}

Thank you!

Answer 1

You should use a reactive variable (ReactiveVar, see the docs here ) to store the currentDay instead of Session. ReactiveVar are much more powerfull and reliable than Session, especially because you create them on the onCreated function of a Template instance.

I advise you to replace all use of Session with ReactiveVar.

Here is a code sample for the currentDay variable:

Template.agendaPage.events({
    'click .dateFilter': function(event) {
         var bgclr;
         var id = $(event.target).attr('data-index');
         var allDays = Session.get('allDays');
         Template.instance().currentDay.set(allDays[id]);
     });
});
Template.agendaPage.helpers({
    currentDay : function(){
        return Template.instance().currentDay.get()
    }
});


Template.agendaPage.onCreated(function(){
    this.currentDay = new ReactiveVar(null);
});

Also, based on this, you should use an external css with css classes containing your colors (ie .active class) and use {{#if}} statement to set the class to the html element that is getting activated ( <button> )

Template.agendaPage.helpers({
    isActive : function(element){
        let currentDay = Template.instance().currentDay.get()
        // do wathever logic you need based on the `element` variable passed as param
        return true; // or false
    }
});

<button class="{{#if (isActive this)}}active{{/if}}">

.active{
    "background-color": "#0091FF"
}

I haven't tested the sample codes, don't hesitate to comment if you need more details