I have a task list in Meteor in which I want to be able to update certain tasks. There is a 'priority' field in the collection. I am able to set the value property in the select tag. What I want is to set as 'selected' the option that matches the value of select tag.
Here is my code in the template:
<select value="{{priority}}" id="priorityList">
<option value="Low">Low</
<option value="Medium" >Medium</option>
<option value="High">High</option>
</select>
This is code code in the helper:
Template.add_task.helpers({
update: function() {
if(Session.get('id')) {
var id = Session.get('id');
var task = Items.find({_id: id});
console.log(task);
return task;
}
}
});
I am able to get the data for the fields from the helper but am new to coding and am trying to find a solution to be able to set either "Low", "Medium", or "High" to 'selected' so it will show on the dropdown when I go to update the task.
Thanks for any help that can be provided.
As you have said, priority property of a document will decide which item would get selected in the view by default. You can set another helper to make the tweaks.
<option value="Low" {{ isSelected "Low"}} >Low</option>
<option value="Medium" {{ isSelected "Medium"}} >Medium</option>
<option value="High" {{ isSelected "High"}} >High</option>
Template.add_task.helpers({
update: function(){//previous code},
isSelected: function(value){
var taskPriority = Items.findOne({_id: Session.get('id')}).priority;
return (taskPriority === value) ? 'selected' : '' ;
}
});
This is one possible solution. This problem may have a better solution than this. You are welcome to modify the codebse according to your needs.
Related
I render a HTML select with Handlebars, but I cannot set the selected value, if such value is itself already a rendered data attribute. I found other solutions in SO not satisfactory since they do not address this particular issue.
I tried
<select>
{{#each countriesList}}
<option value="{{#key}}" {{{isSelected ./setCountry #key}}}>
{{this}}
</option>
{{/each}}
</select>
I have the following helper to try to set the selected value
isSelected: function (Country, key) {
return Country === key ? 'selected' : '';
}
I render in expressjs
var countries = {'en': 'England', 'fr': 'France', 'de' : 'Germany'};
var data = {'countriesList':countries, 'setCountry': 'fr'};
res.render('home', data);
It should have set the France option as the selected option, but it doesn't work! I also tried to get the rendered attribute from the helper function, but without success. Any ideas?
I found the solution. Apparently it has to do with the dot. Instead of ./ it should be ../ to make reference to the main data variable. Now it works
<select>
{{#each countriesList}}
<option value="{{#key}}" {{{isSelected ../setCountry #key}}}>
{{this}}
</option>
{{/each}}
</select>
helper:
isSelected: function (Country, key) {
return Country === key ? 'selected' : '';
}
expressjs:
var countries = {'en': 'England', 'fr': 'France', 'de' : 'Germany'};
var data = {'countriesList':countries, 'setCountry': 'fr'};
res.render('home', data);
I need convert Jade select list which iterates over statuses and assigns a status to an account into Handlebars template. In Jade it looks like this:
select.form-control(name='status')
option(value='') -- choose --
for status in data.statuses
option(value='#{status._id}') #{status.name}
I tried to do this with #each like this
<select name="status" class="form-control">
<option value="">-- choose --</option>
{{#each statuses}}
<option value="{{this._id}}">{{this.name}}</option>
{{/each}}
</select>
but it doesn't work because it is not an array.
Is there a way to do this with Handlebars? Thank you.
You can see this example:
http://jsfiddle.net/bby5ynuw/
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
statuses:[
{_id:1, name:'name1'},
{_id:2, name:'name2'}
],
statuses2:{
o1:{_id:1, name:'name1'},
o2:{_id:2, name:'name2'},
o3:{_id:3, name:'name3'}
}
};
$('body').append(template(data));
Both variants (array and object) are working correct with your template. May be you set statuses into handlebars incorrect?
I'm trying to study Meteor with a simple example to populate two dropdowns where one is a list of fruit and another one is the color according to the fruit chosen:
collection (ProductList):
a = new Array();
a.push({color:"orange"});
a.push({color:"red"});
ProductList.insert({ product: "Orange", a });
a = new Array();
a.push({color:"green"});
a.push({color:"red"});
ProductList.insert({ product: "Apple", a });
a = new Array();
a.push({color:"green"});
a.push({color:"yellow"})
ProductList.insert({ product: "Banana", a });
html (dropdown menu):
<template name="prodlist">
<select id="category-select">
<option disabled="disabled" selected="selected">Please Select</option>
{{#each prodlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
js:
Template.prodlist.events({
"change #category-select": function (event, template) {
var category_prod = $(event.currentTarget).val();
//this return the correct element selected in the dropdown(i.e Orange Apple Banana)
console.log("category : " + category_prod);
var productID = ProductList.findOne({product: category_prod })._id
console.log("current ID: " + productID);
}
});
Please see the ****** above for my first question This has been solved by chrisklaussner. Code updated.
Also I'm trying to feed the ._id (saved to productID) found to the second dropdown:
html:
<template name="colorlist">
<select id="category-select">
<option disabled="disabled" selected="selected">colors</option>
{{#each colorlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
js:
Template.colorlist.helpers({
colorlist: function () {
const ans = productID.get();
const product = ProductList.findOne({ _id: ans});
if (product) {
return product.a.map(function (doc) {
return doc.color;
});
}
}
});
Please see the ****** above for my second question This has been resolved.
EDIT: This question has been resolved and the Original post contains the correct answer
You have a mistake in the findOne calls. The first parameter (where you pass {}) is the selector that specifies what you want to fetch. The second one is for options.
For example, ProductList.findOne({ product: category_prod })._id should give you the right product ID. In your case, the selector {} matches all products in the collection and findOne returns the first of them. That's why you always get the same ID.
I have a dropdown that gets its items from database. The default value to be selected in this dropdown is retrieved from a cookie.
The problem is,
1. there is an empty option tag as the first option and also,
2. the default value is not selected.
There is no issue at all when I use v1.3.16. This happens when using v1.2.0. (I have to use only v1.2.0)
How to fix this.
ASPX:
<select id="ddlItems" data-ng-model="ItemId">
<option value="-1">-- All Circles --</option>
<option data-ng-repeat="item in Items" value="{{item.AreaCode}}"
data-ng-selected="item.AreaCode==ItemId">{{item.AreaName}}</option>
</select>
Ctrl.js:
var promise = MyFactory.GetItems();
promise.then(function (success) {
if (success.data != null && success.data != '') {
var data = success.data;
$scope.Items = data.lstItems; //bind items to dropdown
$scope.ItemId = itemIdFromCookie; //select default value
alert(itemIdFromCookie); //it pops -1
}
else {
console.log(success.data);
}
}
Rendered HTML:
<select id="ddlItems" data-ng-model="ItemId">
<option value="? string:"-1" ?"></option>
<option value="-1">-- All Circles --</option>
//...other options
</select>
Try to use ngOptions instead
Like this
<select id="ddlItems"
data-ng-model="ItemId"
ng-options="item.AreaCode as item.AreaName for item in Items">
<option value="-1">-- All Circles --</option>
</select>
This happens becausedata-ng-model="ItemId" is empty when your model is App is Loaded.
To Have some initial value. you can put default value in ng-init
For Ex : data-ng-init='data-ng-model="--SELECT--";'
Or per your Array list Item which you are getting from database set one of the values.
Remember init will get triggered b/f you complete the Ajax Call.
I want to set the value of an HTML <select> element reactively, without changing the various options for the element. I have found a solution, but it in not elegant.
To test, create a barebones Meteor app with create meteor select and change the contents of the select.html and select.js files to the following:
select.html
<body>
{{> select}}
</body>
<template name="select">
<label for="select">{{category}}</label>
<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>
select.js
if (Meteor.isClient) {
Session.set("category", "")
Session.set("label", "Category")
Template.select.onRendered(function () {
setSelectValue()
})
Template.select.helpers({
category: function () {
setSelectValue()
return Session.get("label")
}
});
function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}
Now launch your app. In the browser console, you can change the value of the category Session variable:
Session.set("category", "Animal")
However, the select element will not update until you change the label:
Session.set("label", "category") // was "Category'
Now the select element updates, and any subsequent change the category Session variable will also update the select element.
Session.set("category", "Vegetable") // Now the select element updates
Is it possible to achieve the same effect directly, without using this clumsy workaround?
Yes. You can do it as follows:
<select id="select">
<option value="Animal" {{animalSelected}}>Animal</option>
<option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
<option value="Mineral" {{mineralSelected}}>Mineral</option>
</select>
And helpers that looks something like this:
Template.select.helpers({
animalSelected: function () {
return (someCondition === true) ? 'selected' : '';
},
vegetableSelected: function () {
return (someOtherCondition) ? 'selected' : '';
}
});
A better way might be something like this though:
<select id="select">
{{#each options}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/each}}
</select>
And then you can use this in the helpers to decide what is selected and what isn't.
Another option is just using standard jQuery to change the select box. Something like this:
$('[name=options]').val( 3 );
Or this SO answer.
If you want the selection set dynamically I usually use a handlebar helper like this
Template.newtask.helpers({
filler: function(element){
return Session.get(element);
}
});
then in html
<select class="browser-default" id="selectedService" name="jobtype">
<option id="zero" value="{{filler 'type'}}">{{filler 'type'}}</option>