"Selected" not working in Dropdown Blaze

help
1

Hi Everyone,

I am working on a module in which I have to insert value by selecting from a drop-down and then after successful insertion, I need to update the value.

There is no problem in insertion but while updating I have created a modal in which I need to show the previously inserted value. I have created helpers for that.
here is my code for update

<template name="skill">

...
<select id="last_used_edit">
      <option value="" disabled selected>Year</option>
      <option value="1"  selected="{{option3Selected 'Option 1'}}"  >Option 1</option>
      <option value="2"  selected="{{option3Selected 'Option 2'}}"  >Option 2</option>
      <option value="3" selected="{{option3Selected 'Option 3'}}"  >Option 3</option>
      <option value="4" selected="{{option3Selected 'Option 4'}}" >Option 34</option>
    </select>

...
</template>

and the JS part consists

Template.skill.helpers({
 option3Selected:function(param) {
  alert("function Called" + param);
  if(Session.get("selectedOption") ==param){
   return 'selected';
  }
}  
});


Template.skill.events({
  'click #edit_skills':function(event){
   var ref =  JSON.stringify(this);
    var obj = JSON.parse(ref);
    alert(obj.last_used + "last");
    if(obj.last_used == "2017"){
      Session.set("selectedOption","Option 3");
    Template.skill.__helpers.get("option3Selected").call(this,"Option 3");
  }else{
      alert("2017 is not last used");   
          Session.set("selectedOption","Option 1")
  }
  alert("Session" + Session.get("selectedOption"));
            alert(ref);
   }
});

Sometimes it is working fine, but sometimes after clicking on the edit button, The helper function gets called 4 times and I don’t know the reason for this. If there something wrong with the approach then please let me know. Please help.

2

I do not think you will have much success in calling helper functions from events. Think of helpers more like a middleware that can do things like transform data or act as a reference to things in the template that the html needs access to.

Generally, you will want to use events to take the user inputs and set things like reactiveVar or Session, and then return those values in your helpers.

1 Like
3

The reason the helper is re-running 4 times is because they are Reactive.

Any time you change a reactive data source, any Tracker.autorun or helper that has used that data source will re-run

Session is a reactive data source.

Calling Session.set('selectedOption') in your event handler will cause the helper to re-run because it relies on Session.get('selectedOption').

Because the helper is called in four locations, it re-runs in all four locations to update the template

4

So, is there any solution by which I can achieve what I want?

5

Thanks @vigorwebsolutions, I am new to meteor and don’t have the prior knowledge of it. Could you assist me to get a solution for my problem, without using session how could I achieve the desired results?

6

I don’t think I really understand what you’re trying to achieve. You have a dropdown with some options, then you select an option, then what? Where are you inserting these values?

7

Hi !
I’d suggest use of registerHelper instead of option3Selected template helper function. also I’d avoid use of Session in favour of ReactiveVar.

As a rough example:

// client/main.js
Template.registerHelper('selected', function(key, value) {
  return key == value ? 'selected' : '';
});

// some_template.html
<template name="someTemplate">

...
  <select id="last_used_edit">
    <option value="" {{selected currentChoice  ""}}>Please select one</option>
    <option value="1" {{selected currentChoice  "1"}}>Option 1</option>
    <option value="2" {{selected currentChoice  "2"}}>Option 2</option>
    <option value="3" {{selected currentChoice  "3"}}>Option 3</option>
    ...
  </select>
</template>

// some_template.js

Template.someTemplate.onRendered(function(){

  const choice = Choices.findOne({user_id:userId}).choice || "";
  Session.set("currentChoice", choice)
  
});

Template.someTemplate.helpers({
 currentChoice () {
   return Session.get("currentChoice")
 }  
});

Template.someTemplate.events({
   'change #last_used_edit' (event, template) {
         const choice = template.find('#last_used_edit').value;
         // do something with choice
         Choices.update({user_id:userId, choice: choice } )
         ....
         Session.set("currentChoice", choice)
   }
});
1 Like
8

Hi @vigorwebsolutions, Actually the code is concerned with updating the existing. I want the value should populate first properly and I got stuck in this part, So I add this as question in Forums.

9

Hi @distalx, Thanks for this, I tried this and its working, but my only concern is I have more than one dropdowns, Actually more than 10 dropdowns and could be more than that. If I would use session variable then there would be unlimited session variables that would cause too much overhead in development.

During my search, I got to know about Semantic UI.

So for now, I am using Semantic UI dropdown. it has the method for setting the value and it’s working. So, I am using this, for now, I hope it works fine. Let me know if you have any concern regarding Sematic Dropdown.

Thanks again for the solution you have provided.