Dynamic Templates

I asked a question before about the dynamic template and its usage. I couldn’t figure it out then and i’m coming back to it now.

<template name = "selectFrame">
     <div class = "container-fluid">
	      {{> Template.dynamic template = active}}

 active: function(){
      return Session.get('selectedBoard');

The selectFrame template is the second step within a jQuery steps wizard. In the first step, I am setting a session variable called selectedBoard on the click of a button. Depending on which button the users click a, b, c, or d I would like the second step to display the corresponding template A, B, C, D. Active is a template helper that determines which template to display. The template names for each of the templates A, B, C, D match the id’s of each of the buttons on the first page. I can get each of the templates to display individually if and only if I define a default value of the session variable, selectedBoard. Can anyone offer any help?

Are you setting the Session variable in the click event?
Session.set('selectedBoard', aValueFromTheClickEvent)


<div class='buttonGroup'>
    <button name="a">step a</button>
    <button name="b">step b</button>
    <button name="c">step c</button>
    <button name="d">step d</button> 

      'click button': function(e){
          Session.set('selectedBoard', $(e.target).attr(name));


That’s basically my code.

    'click #selected': function (event) {
	selectedBoard = event.target.id;
	Session.set('selectedBoard', selectedBoard);

I’ve found that the problem is jQuery steps. Without jQuery steps included and the application working as a single page app with multiple templates. Template Dynamic works as expected. Once jQuery steps is included Template Dynamic somehow loses its ability to updated dynamically.

Take a look below. I’ve added my code for the click event. Click event exists in the body template and is the only place where the click event will register.