9

I know that Meteor supports events and I have seen it in action on checkboxes, but I just wanted someone to be able clarify if we can hook change events in meteor on select dropdowns as like the following

 Template.templateName.events({
     'change select': function(e,t){
        // do whatever.......
     }
 });

I am trying to do this using Meteor and it doesn't seem to be firing when I change the value in the select box. However when I use jQuery to change things then it works fine.

0

4 Answers 4

3

Your code should work, it works fine for me.

Though I think events only take one eventMap-argument, not two. What would the "t" argument be?

3
  • Kristoffer K: According to some of the tutorials i have been following I think the t represents some targeted element possibly when the reactive part of meteor changes. In regards to the select code working fine, strange I have tried it again and again even on different parts and it still doesn't pick up the change event at all. Anyway thanks for answering.
    – koramaiku
    Jun 14, 2013 at 11:07
  • 1
    OK, I use event.currentTarget to get the current target. I think that's the "correct" way to do it. Or do you mean some other element than the clicked/changed/whatever one? Thank you! Jun 14, 2013 at 11:49
  • 3
    second parameter can be used to get the related template data through t.data, for example when you're using {{#each users}}{{>itemRow}}{{/each}} you can listen to events in template itemRow and use t.data to get the user associated with the row Jun 24, 2014 at 12:56
1

You can use an event like this to handle multiple checkboxes, then check some property (often id) to see which one was clicked. Or here since this returns my client row, I can just get the value I want from the context.

Template fragment:

 {{#each phonemeResults}}
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox" class="star">
          </label>
        </div>
      </td>
      <td>
          {{word}}
      </td>
      <td>
        <small>{{phoneme}}</small>
      </td>
    </tr>
  {{/each}}

Event handler:

Template.phonemeList.events({
  'change [type=checkbox]': function(e, t){
    console.log("add " + this.word + " to user's public starred list");
  },
});
0

If you want it to fire on a specific select box change:

Template.chatRooms.events({
'change #chatroomList' : function(event){
        console.log("Changed")
      }
})

If you want it to fire on any selectbox change in the template:

Template.chatRooms.events({
    'change select' : function(event){
            console.log("Changed")
          }
    })
0

I have a similar issue. The gotcha was that only the <option> elements were included in my template, and the <select> element was in outside it, in <body>. Make sure that the Template the event map is configured actually contains the <select> element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.