Select list in modal

help
1

I’m building my first app, and implemented a bootstrap modal to do data entry for one of my collections. I’m not using autoform or any other packages to help with the form generation/data binding. At this point I have everything working like I want with the exception of a select/dropdown list.

I’ve got the modal working for both adding new records and updating existing records. The select list is grabbing data from a related collection, presenting the correct dropdown choices and sending the right values back to the database. The only part I don’t have working is the “edit mode”, where I retrieve a record and need the select list to show the value that comes from the database as the selected value.

It would seem to be a pretty common pattern for meteor apps but I’m not having a lot of luck finding a good forum post or blog about implementing this. Also looked through the documentation and not finding anything right away.

Here’s my HTML code in the modal template:

<div class="form-group">
       <label for="category-select">Category</label>
       <select id="category" >
       <option disabled="disabled" selected="selected">Please Select</option>
          {{#each categories}}
              <option value="{{this}}">{{this}}</option>
          {{/each}}
       </select>
</div>

The categories are coming out of a helper in the template.

Template.productModal.helpers({
  categories:function(){
    return SubCategories.find().map(function (doc) {
      return doc.name;
    })
  },
...
...
...
  }
});

And then of course there’s an event on the template to support the save operation, which makes calls to the server-side methods. As I said, all of that works great. The only problem is when I’m in edit mode I don’t know how to tell the select list which value is coming from the database and should be shown as the selected value. Any pointers on the best way to do this?

Also, I’m curious if people generally use a package to support this kind of thing? Or are you just “rolling your own”? I’m sure if it’s a simple line of code that there’s no need for a package helper. Advice from experienced developers would be appreciated.

2

One fairly common way of handling this is to create a selected value helper:

Template.registerHelper('setSelected', (optionValue, incomingValue) => {
  let selectedValue;
  if (optionValue === incomingValue) {
    selectedValue = 'selected';
  }
  return selectedValue;
});

You would then call it like:

{{#each charges}}
  ...
  <select class="form-control">
    <option value=""></option>
    <option value="passed" {{setSelected "passed" audit}}>
      Passed
    </option>
    <option value="failed" {{setSelected "failed" audit}}>
      Failed
    </option>
  </select>
  ...
{{/each}}

where audit in this example is coming from the templates charges helper.

The above being said the defacto standard way of handling this in the Meteor (Blaze) world, is to use Autoform instead (since it takes care of this and about 10,000 other form related tasks.

1 Like
3

@hwillson, thanks for the response. I was afraid that what I was doing was “the hard way”, and that there was probably a package that would help things go a little easier. I’ll go ahead and add Autoform to my project and start to play around with it. Do you know if I can “refactor” just the select list and continue to use the rest the way it stands, until I want to move the rest of the form to the Autoform?

4

Unfortunately this would be a bit tricky to do unless you can split your select list into a separate form (which could then be an Autoform form).

5

That’s good to know. Guess I need to dig into the whole enchilada sooner than later then. Thanks for the responses. It can be a little overwhelming digging into a new stack like this and going it alone so the pointers are greatly appreciated.