Access to the value of a select in a child template

help
1

Hello,
I am a beginner in Meteor. How can I access from my linksModal helper to the value of the select #toutelangue in the langList template ?

<template name=“linksModal”>
[…]
<div class=“langues”>
{{> langList}}
</div>
</div>
</div>
<div class=“form-group”>
<div>
</div>
</div>
</div>
<div class=“modal-footer”>
<button type=“submit” class=“btn btn-default” id=“save”>Sauvegarder le lien </button> <button type=“button” class=“btn btn-default” data-dismiss=“modal”>Annuler </button>
</div>
</div>
</div> </template>
<template name=“langList”>
<select class=“langues” multiple=“multiple” id="#toutelangue">
{{#each langue}}
<option value="{{_id}}">{{label}}
{{/each}}
</select>
</template>

Thank you

2

I would try something like
Template.instance().$('select').selected

When u
console.log(Template.instance().$(‘select’))
it should match the select element

3

thank you Shock for your help, I tried but got

console.log(Template.instance().$('select').selected);
/*
Exception: TypeError: Template.instance(...) is null
@Scratchpad/1:1:13
*/

although I selected one item.

4

Template.instance() inside helper could not be null, did u paste it to helper or run in browser ?

5

I ran it in the browser javascript console but in my code I had it inside Template.linksModal.events

6

well, that is code for helper, not event handler nor browser

7

So could I put it into the helper and get it from the event through a function ? I am sorry I wasn’t not clear enough.
here my code
> Template.linksModal.events({
> ‘click #save’: function(e) {
> e.preventDefault();
> var selectedCatId=Session.get(‘selectedCatId’);
> var selectedLinkId=Session.get(‘selectedLinkId’);
> if (!selectedLinkId) {
> var lien = {
> // categoryId.catId:$(’#categoryId’).val(),
> address: $(’#address’).val(),
> label: $(’#label’).val(),
> defaut: 1,
> private: 0,
> clicks: 0,
> submitted: new Date(),
> clicked: new Date(),
> };
> toutesleslangues = Template.instance().$(‘select’).selected;
> alert (JSON.stringify(toutesleslangues));
> Meteor.call(‘addLink’, lien, selectedCatId, toutesleslangues, function(error, result) {
> if (error) {
> alert(error);
> }
> });
> }
> else {
> Links.update({’_id’:selectedLinkId},{$set:updateItem});
> }
> Modal.hide(‘linksModal’);
> }
> });
> Template.linksModal.helpers({
> link: function() {
> var linkId = Session.get(‘selectedLinkId’);
> if (typeof linkId !== “undefined”) {
> var link = Links.findOne(linkId);
> return link;
> }
> }
> });
> Template.langList.helpers({
> langue: function() {
> return Languages.find({}, {sort: {label: 1}});
> }
> });

8

paste that event helper u r using cause it is kinda hard to guess …
PS: as code “preformatted text” :smiley:

9

As you can see, my code is in progress, it is not finished, I just added an alert to see the result.

10

paste it as code so it is readable, btw
'click #save': function(e, instance) {

and than
instance.$(‘select’).selected

11

I still have undefined as a result with :
toutesleslangues = instance.$(‘select’).selected;
alert (JSON.stringify(toutesleslangues));

12

so console.log just instance.$(‘select’) if it matched something
and try which property you want from browser console. there it should be as $(‘select’)

13

was dealing with the same problem.
instance.$('select').selected
returned undefined for me too.
just go with
instance.$('select').val();
this works fine for me.

to get the text of the selected option:
instance.$('select option:selected').text();

14

Using http://viewmodel.meteor.com by @manuel you can do it this way:

using a reference:

{{> langList ref="langList"}}

<select class="langues" multiple="multiple" id="#toutelangue" {{b "value: selectValue" }}>

Template.linksModal.viewmodel({
  autorun: function () {
    console.log("Select value is: " + this.langList.selectValue());
  }
});

or using a parent’s property:

<select class="langues" multiple="multiple" id="#toutelangue" {{b "value: parent.selectValue" }}>

Template.linksModal.viewmodel({
  selectValue: "",
  autorun: function () {
    console.log("Select value is: " + this.selectValue());
  }
});

or using a child’s property:

<select class="langues" multiple="multiple" id="#toutelangue" {{b "value: selectValue" }}>

Template.linksModal.viewmodel({
  autorun: function () {
    console.log("Select value is: " + this.child().selectValue());
  }
});

Template.langList.viewmodel({
  selectValue: ""
});

or using a shared property:

<select class="langues" multiple="multiple" id="#toutelangue" {{b "value: selectValue" }}>

Template.linksModal.viewmodel({
  share: "sharedObject",
  autorun: function () {
    console.log("Select value is: " + this.selectValue());
  }
});

Template.langList.viewmodel({
  share: "sharedObject",
});

ViewModel.share({
  sharedObject: {
    selectValue: ""
  }
});

depending on what you prefer. :wink:

1 Like
15

Thanks to you for your solutions.
Have a nice day!
:slight_smile: