Populate drop down list in Meteor

I am building a drop down list in Meteor using a helper function. However, users will need to be able to update the form in the future so I need the form to repopulate with all the previously selected values based on data in Mongo. I am able to populate textboxes and text areas in my form with my collection data but I have been unable to set the value in the drop down list to what is being stored in my Mongo collection.

The solution I have now is close, I think. It works if a user refreshes the page when viewing a specific record but navigating to the template using iron:router the helper function is called prior to the template being fully rendered, leaving the selected value in the drop down blank. If I move the logic to an OnRendered block, then I am unable to get to this.source to dynamically pick up the value from the collection.

Does anyone have any ideas on how I might be able to populate the selected value of a drop down list based on the value that is stored to the collection? Thanks in advance!

<template name="leadForm">
    <form id="newLeadForm">
    <select class="form-control" name= "leadSource" id="leadSource">
        <option disabled="disabled" selected="selected">Please Select</option> 
        {{#each categories}}
            <option value="{{this}}">{{this}}</option>
        {{/each}}
    </select>
    {{setDropdownValue}}
    </form>
</template>


Template.leadForm.helpers({
    'categories': function(){
        return ["Option1", "Option2", "Option3"]
    },
    'setDropdownValue': function(){
        $('#leadSource').val(this.source);
    }
});

Answers


You don't need to set the dropdown with DOM manipulation, just let the templates do it for you. When the DB query changes, meteor will rerender the template for you.

template:

<template name="leadForm">
    <form id="newLeadForm">
    <select class="form-control"  id="leadSource">
        <option disabled="disabled">Please Select</option>
        {{#each categories}}
            <option value="{{this.option}}" {{isSelected this.option}}>{{this.option}}</option>
        {{/each}}
    </select>
    </form>
    <br/>
    <button id='addOption'>Add a new option to Drowdown</button>
</template>

js: (I'm using the anti:fake package to generate data - meteor add anti:fake)

Options = new Mongo.Collection("options");
Selected = new Mongo.Collection("selected");

if (Meteor.isClient) {
  Template.leadForm.helpers({
    'categories': function(){
        return Options.find();
    },
    'isSelected': function(option){
      var selected = Selected.findOne('SELECTED') ? Selected.findOne('SELECTED').selected : '';
      return option === selected ? 'selected' : '';
    },
  });

  Template.leadForm.events({
    'click #addOption': function () {
      Options.insert({option: Fake.sentence(3)});
    },
    'change #leadSource': function(event, template){
      Selected.update('SELECTED', {selected: event.target.value});
    }
  })
}

if (Meteor.isServer) {
  // code to run on server at startup
  Meteor.startup(function () {
    if(Selected.find().count() === 0)
      Selected.insert({_id: 'SELECTED', selected: ''});
    if(Options.find().count() === 0) {
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
    }
  });
}

meteorpad example


Need Your Help

EKEventEditViewController SGErrorDomain code=8 when adding Invitees

ios ios9 ekevent

Im trying to create an EKEvent via EKEventEditViewController with a valid EKEventStore instance (user granted the permissions to calendars and events).

Mongoose isn't saving edited document

node.js mongodb express mongoose

I've recently started playing with Node.js and I've been trying to create a basic blog (using Express, MongoDB and Mongoose) where I can create, edit and delete posts. I've managed to get everything