[Solved] Meteor likert scale toggle effect missing

I have the following html displaying a scale 1-5, I get the value that is clicked but it seems as it does not toggle or change the color when a number is clicked it only changes the color temporarily as shown in file attached

<div class="row">
    <div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group" role="group" aria-label="likert group">
            <div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
                <a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
                    <label class="btn btn-success" >
                        <input type="radio" name="likert" value="1" autocomplete="off">1
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="2" autocomplete="off">2
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="3" autocomplete="off">3
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="4" autocomplete="off">4
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="5" autocomplete="off">5
                    </label>
                <a class="btn btn-link disabled" disabled>Very Much</a>
            </div>
        </div>
    </div>
</div>

likert_effect

How can I achieve the toggle effect?

It appears that this is not a Meteor-specific question, but more of a general html/javascript question. You might want to post this on Stackoverflow – a great resource that probably everyone here uses. btn-toolbar, btn-group, and btn-link are Bootstrap classnames. Does Bootstrap include Javascript to handle these clicks? If so, include 'Bootstrap` in your tags on your Stackoverflow post.

If this is Blaze maybe do something like this:

In the onCreated event create a reactivevar variable called ‘selected’ or something

When you click any of the likert options capture that in an event handler and set the ‘selected’ reactive template var to the value tapped

Create a template selectedClassHelper helper that returns ‘selectedClass’ or blank based on the value of ‘selected’ reactive var stored and whatever likertVal you pass in from the template to indicate which item you’re wanting to highlight.

In the template add {{selectedClassHelper likertValOfItem}} to each class of the items in your list of numbers shown the user.

Any time you change the ‘selected’ reactive value it should reactively update what’s selected with the selectedClass.

Or something like that.

You should b able to make this work.

I created a quick demo with Bootstrap4. I put your scale into a template, which can be included like {{>scale value=initial}}

Template.scale.onCreated(function(){
  const instance = this;
  // since we use the click event to change the initial value
  // wait for the template to be initialized before the event
  // handler fires
  instance.initialized = false;
})
Template.scale.onRendered(function(){
  const instance = this;
  const value = instance.data.value;
  if(value != undefined) {
    instance.$(`input[type="radio"][value="${value}"]`).trigger('click');
  }
  instance.initialized = true;
});
Template.scale.events({
  'change input'(event, instance) {
    if(instance.initialized){
      console.log(`scale ${event.currentTarget.value}`);
    }
  },
});

And here is the template

<template name='scale'>
  <div class="row">
    <div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group" role="group" aria-label="likert group">
            <div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
                <a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
                    <label class="btn btn-success" >
                        <input type="radio" name="likert" value="1" autocomplete="off">1
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="2" autocomplete="off">2
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="3" autocomplete="off">3
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="4" autocomplete="off">4
                    </label>
                    <label class="btn btn-success ">
                        <input type="radio" name="likert" value="5" autocomplete="off">5
                    </label>
                <a class="btn btn-link disabled" disabled>Very Much</a>
            </div>
        </div>
    </div>
  </div>
</template>
1 Like

thank you so much for the replies!!
The solution for me was to import the below library in my.js in order for the toggle to take effect

import 'bootstrap/dist/js/bootstrap.bundle';

As @coagmano correctly mentions in post
similar-toggle-issue

…javascript files in npm modules are not automatically sent to the client, so you will need to tell meteor that you want it…

1 Like