Meteor Select in form questions? - meteor

Question

I have 2 select items in one form Country's and States, depending on the choice made in Countrys the second select as other values (of states) in it !
This works when i do it in a empty form. with code here under :
Template.registerPartnerStep2.events({
'change #countryList': function (event, template) {
event.preventDefault();
var x = myTrim($("#countryList").val());
var y = Countrys.findOne({country: x});
var z = y.nr;
if(template.stateSub != null){
template.stateSub.stop();
}
template.stateSub = Meteor.subscribe('stateList', z);
},
'change #stateList' : function(event, template) {
event.preventDefault();
var x = myTrim($("#stateList").val());
if (template.citySub != null) {
template.citySub.stop();
}
template.citySub = Meteor.subscribe('cityList', x);
},
A part of my template :
{{#with addressFormData}}
<form id="partnerAddressForm" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Company"}}</label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"Company name"}}" id="company" class="form-control" value="{{partner_company}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"VAT nr"}} </label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"VAT nr"}}" id="vatNr" class="form-control" value="{{partner_vat_nr}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Phone"}}"</label>
<div class="col-sm-4">
<input type="text" placeholder="{{_"Phone"}}" id="phoneNr" class="form-control" value="{{partner_phone_nr}}">
</div>
<label class="col-sm-2 control-label" for="textinput">{{_"Mobile"}}</label>
<div class="col-sm-4">
<input type="text" placeholder="{{_"Mobile"}}" id="mobileNr" class="form-control" value="{{partner_mobile_nr}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Line 1"}}</label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"Address Line 1"}}" id="addressLine1" class="form-control" value="{{partner_address_line_1}}">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Line 2"}}</label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"Address Line 2"}}" id="addressLine2" class="form-control" value="{{partner_address_line_2}}">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Country"}}</label>
<div class="col-sm-10">
<select id = "countryList" placeholder="{{_"Country"}}" class="form-control">
<option disabled selected>{{_"-- select an option --"}} </option>
<option selected="selected">{{partner_country}}</option>
{{#each countrys}}
{{> country}}
{{/each}}
</select>
</div>
</div>
<!-- Text input STATE ZIPCODE-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"State"}}</label>
<div class="col-sm-4">
<select id = "stateList" placeholder="{{_"State"}}" class="form-control" value="{{partner_state}}">
<option disabled selected>{{_"-- select an option --"}}</option>
<option selected="selected">{{partner_state}}</option>
{{#each states}}
{{> state}}
{{/each}}
</select>
</div>
<label class="col-sm-2 control-label" for="textinput">{{_"zipcode"}}</label>
<div class="col-sm-4">
<input type="text" id=zipcode placeholder="{{_"zipcode"}}" class="form-control" value="{{partner_zipcode}}" readonly>
</div>
</div>
<!-- Text input CITY-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"City"}}</label>
<div class="col-sm-10">
<select id = "cityList" placeholder="City" class="form-control" value="{{partner_city}}">
<option disabled selected>{{_"-- select an option --"}} </option>
<option selected="selected">{{partner_city}}</option>
{{#each citys}}
{{> city}}
{{/each}}
</select>
</div>
</div>
<!-- Button SUBMIT-->
<div class="col-sm-12 controls">
Question ONE is how can i fix it to let this work in EDIT mode when there are already values in the select ????
I fill the selects with :
{{partner_country}}
But this gives already a problem that when i choose in the list the selected value is listed 2 times ?
Second problem : Because the event is Change the statelist shows only one (the selected) state ! When is add a event click #statelist i must always click 2 times on the list before it is filled up with the collection ?
thanks !

Answer 1

I suppose the main point is that you shouldn't be worrying about filling the selects. We don't have to touch the DOM any more, because Meteor reacts by itself if you set it up properly.
You just need to set the selects to be filled from your collections, and then ensure that Meteor reacts when the selects change.
There are many things that are automatically reactive in Meteor - they just work. For example, if your template is showing a list of records, and someone inserts a new record in the database, Meteor will simply show the new record, because Blaze reactively shows newly inserted records.
I try as far as possible to just use the automatically reactive objects that Meteor provides out of the box.
However in our case I have used a Session variable (another reactive source) to ensure that Meteor reacts.
Whenever the countries select changes, we set a 'statenr' session variable. We use the same session variable in our states helper to get the states from the states collection. Since our session variable is reactive, whenever it changes Meteor goes back to the states collection and fetches the states again. Thus our states select object is changed for us by Meteor, we don't have to refill, so we don't have the problem of duplicate states.
I've done a meteorpad example for you so you can see what I mean:
http://meteorpad.com/pad/nccZTcPZx2k8H4XjF/select%20state%20example
To get the chosen country and state into the selects you need this code:
Template.registerHelper('selected', function(key, value){
return key == value ? {selected:'selected'}: '';
});
which I got from this slightly out-of-date page (2nd answer)
Set the selected item in a select list based on template value
and you call the helper (see {{selected partner.statenr nr}}) from your template in each <option> like this:
<select id="partnerStates">
<option disabled selected value="">Choose a state</option>
{{#each states partner.countrynr}}
<option value="{{nr}}" {{selected partner.statenr nr}}>
{{name}}
</option>
{{/each}}
</select>
If you go back to the meteorpad you can see it work in the lower half of the page. On startup I fill a partner record with Germany and Ost-Friesland nrs, then display it in the template in the lower half of the page.