I have a select dropdown with a list of users first names from the Meteor.users collection. I want to add the selected users ID as a property of another collection when submitting the form. What is the best way to get that users ID?
Use a Meteor.method and search users with the name string to get ID and assign to insert object
Attached the ID as an attribute to the tag when iteration over the collection and retrieve when submitting form.
Is there an easier way?
Code is useful to help clarify. But if I understand correctly the way I would have done it was to populate the dropdown with id / name. So the <option> display would be name, but the value that is selected would be _id.
<select class="" id="user_select" >
{{#each my_users }}
<option value="{{_id}}">{{userName}}</option>
{{/each}}
</select>
my_users would return objects like [{_id: xxxxx, userName: "nix" }, { ..} ]
Related
lets say i have this data
{
method: ['twitter','reddit','google'],
auth: {
twitter: {id: 213},
reddit: {},
}
}
i want to list all the methods that are not in auth, or are in auth but dont have an id listed
methods in auth with id:
{{#each auth}}
{{#if id}}
{{#key}}
{{/if}}
{{/each}}
methods not in auth with id:
{{#each method}}
{{#unless (lookup ../auth this)}}
{{this}}
{{/unless}}
{{/each}}
What I'm hoping to see is the first part printing out just twitter (since it's the only one that's in auth and has an id), and in the second part it should print out the opposite, both reddit and google.
Right now the second part only prints out google
My current code works for things that aren't in the auth object (google), but it's not able to check if there's an ID defined in the auth object, so it doesn't print out reddit even though it should.
I tried doing {{#unless (lookup ../auth this.id)}} but that prints out all 3, presumably because the lookup is failing.
here's a codepen: https://codepen.io/skeddles/pen/bGjzRZx
I think you are on the right track. I would just add a second lookup:
{{#each method}}
{{#unless (lookup (lookup ../auth this) 'id')}}
{{this}}
{{/unless}}
{{/each}}
This takes the result of lookup ../auth this and looks for an id property on that result. Therefore, only methods that have keys in auth that resolve to an object with id property will resolve as truthy.
I have forked your Codepen.
The part of the view where I filter it through Car Categories:
<div class="form-group">
<select class="form-control" id="sel1">
<option value="" disabled selected hidden>Car Styles</option>
#foreach (var item in Model.CarCats)
{
<option value="#item.CarCategoryID">#item.CarCategoryName</option>
}
</select>
</div>
The part of the view where I have cars:
#foreach (var item in Model.Cars)
{
<div class="col-lg-4">
<div class="carGalleryWrapper">
<div class="carGallery" style="background:url('#Html.DisplayFor(modelItem=>item.ImagePath)') no-repeat 0 0 ">
<div class="carDetails">
<h4>#Html.DisplayFor(modelItem => item.DailyFee) / Per Day</h4>
<h3>#Html.DisplayFor(modelItem => item.Make) #Html.DisplayFor(modelItem => item.Model), Navi, Leather, ABS</h3>
<button type="submit" class="driveMore">
#Html.ActionLink("Drive Now", "Detail", null, new { id = item.CarID }, htmlAttributes: new {})</button>
</div>
</div>
</div>
</div>
}
I want to show the cars of a category when i select it from the dropdown.
Theres a few ways of going about this
Use a form and populate a new Car list serverside (server side)
submit the form with the selected category, in your method for handling your form
remove cars from your list that dont have that category etc.
A good example of this is here
In the method that takes your page model(the method that will be posted to on form submission) that is where you would filter your car list down by category. Then return the same page.
This doesnt use js so it will always work even if your user has disabled js in their browser however its not the most user friendly due to the page reloading.
Use js to call an api that takes in a category and returns a new list of cars (client and server side)
Then repopulate your frontend with the new list
My js isnt by any stretch any good but the rough idea is to create an api controller that will take in your category and return the filtered list.
look at this answer for a start here if you look at the success response of the ajax call, it builds up html and thats what you would need to do with the filtered list returned from the api
Use js and css to hide/show cars based on the selected category (client side)
Did you have a preference?
I've got a simple list of documents that are generated with the {{#each}} iterator:
{{#each Teachers}}
<td>{{FullName}}</td>
{{/each}}
When a user clicks on one of the teachers listed, a new page is routed to that teacher's profile page and we have access to that teacher's document with 'this' so I can say:
var phone = this.phoneNumber;
Now, within that teacher's profile page another list is generated of that teacher's students:
{{#each Students}}
<td>{{FullName}}</td>
{{/each}}
When the user clicks on a student in that list (on that teacher's page), I'm trying to get access to the student document by using 'this' again. So if I wrote:
Template.TeacherTemplate.events({
'click #student-name': function () {
console.log(this.FullName);
}
I'd expect to see the student's full name in the console. But it's still referencing the teacher's full name here. How can I get the reference to the student when clicking the student list?
Make another template for student.
<template name='student'>
<td>{{FullName}}</td>
</template>
Then use student template in each loop.
{{#each Students}}
{{> student}}
{{/each}}
Template.student.events({
'click': function(){
console.log(this.FullName);
}
});
I am using Ractive and have two select lists. The first select list lets the user select their country. If they select "US", Ractive will check for it and display a list of states for the user to select their state. For example:
<select value="{{country}}">
<option value="CA">Canada</option>
<option value="US">USA</option>
</select>
{{#if country == 'US'}}
<select value="{{chosen_state}}">
{{#states}}
<option value="{{this.state_name}}">{{this.state_name}}</option>
{{/}}
</select>
{{/if}}
When this form first loads "Canada" is selected by default. Once the user selects "US", the states list shows up just fine. However, if I try to check the value of "chosen_state", it is set to empty rather than the first state in the states list. After I manually change the state, then and only then does the "chosen_state" value show as a state value.
Do I have to wait for the change event to be triggered by a manual event, or is there some way to make it so that as soon as the states list is rendered, it will update it's value automatically based on the first state displayed? It would be nice to not have to trigger a change event for every select list when it's rendered.
It turns out that this requires a dirty check using updateModel. I made it so if the select field is changed, it triggers an event that calls updateModel on the instance to dirty check the chosen_state field.
Updated selected code:
<select value="{{country}}" on-change="countrychange">
<option value="CA">Canada</option>
<option value="US">USA</option>
</select>
{{#if country == 'US'}}
<select value="{{chosen_state}}">
{{#states}}
<option value="{{this.state_name}}">{{this.state_name}}</option>
{{/}}
</select>
{{/if}}
And in ractive:
ractive.on('countrychange', function(event) {
this.updateModel();
});
Alternate solutions might include observing the model for updates to the country then running this.updateModel() as well as just running updateModel on the required keypath which is more efficient.
Further documentation on this can be found at:
http://docs.ractivejs.org/latest/ractive-updatemodel
I have a 'collection' (extended ractive object) that has a keypath of 'collection' in the data key of the object which is an array of records.
The view loops the collection with {{#each collection:i}} and a href is generated for the name of each record.
When the user clicks a link on a collection item, an event is triggered which sets a 'selectedIndex' property obj.set('selectedIndex',i)
In my view then, how then do I access the record in collection at this index?
<input type="text" name="title" value="{{abc}}" placeholder="Name">
Where 'abc' is something like 'collection[selectedIndex].prop'
Of course its fine if selectedIndex is not variable, I could use collection.1.prop or collection[1].prop ... but I've tried every possible combination and hunted through the docs but I can't see how to do this ... surely it's possible?
You pretty much nailed it:
<input type="text" name="title" value="{{collection[selectedIndex].prop}}" placeholder="Name">
Looks like you need to guard against the non-existent value (or set a default), see http://jsfiddle.net/m199umtv/