Semantic Drop Down and change Event

help
1

Hello,

I am struggling to get the Semantic UI dropdown to trigger an event in Meteor. My guess is that the change event is looking for a select element, so I can’t seem to get the event firing correctly.

Here is my HTML:

    <h3 class="ui right dropdown item" id="teamPicker" >
      {{getTeamName activeTeam}}
      <i class="dropdown icon"></i>
      <div class="menu">
        {{#each teams}}
        <option class="item" value="{{this.name}}">{{name}}</option>
        {{/each}}
      </div>
    </h3>

…and the client event (coffee).

  'change #teamPicker': (event, template) ->
    selection = $('.selection.dropdown').dropdown('get value')
    console.log("selection", selection)
    console.log event

If I change the event type from “change” to “click”, I can get it to fire, but it seems like a hack as it fires twice.

2

Yeah, change events are only going to fire for inputs, selects, etc. Can you not use a select?

3

In Semantic I haven’t got that to work. For now, I just use a click event and grab the second click, but a bit odd.

4

Not sure if it will help, but this is what I’ve used with a change listener as a select component in Semantic:

<template name="select">
  <div class="field {{fieldClass}}">
    {{#if label}}<label>{{label}}</label>{{/if}}
      <select id="{{id}}" class="{{class}}">
        {{#each options}}
          <option value="{{value}}">{{name}}</option>
        {{/each}}
      </select>
  </div>
</template>

Simplified:

<template name="select">
  <div class="field">
    <label>Some Label</label>
      <select id="mySelect">
        {{#each options}}
          <option value="{{value}}">{{name}}</option>
        {{/each}}
      </select>
  </div>
</template>
5

I found that the semantic-ui dropdown onChange callback works quite well. When you initialise the dropdown (usually on your template onRendered callback function) use something like:

    this.$('.dropdown').dropdown({onChange(value, text, selItem) {
      ...
    })
6

Thanks for the replies. A few things that came together. First is that I needed the <select> tag. If I use that, Semantic changes the rendered HTML. Then to get the value I need to grab the outer dom element vs the triggered #id.

Here is some code in case others run across this:

          <label>Select an Employee</label>
              <select class="ui selection dropdown" id="employeeDropdown">
                {{#each employees}}
                  <option value="{{this}}">{{getFullName this}}</option>
                {{/each}}
              </select>

The rendered HTML is:

<div class="ui selection dropdown" tabindex="0">
  <select id="employeeDropdown">
      <option value="tkJNyQJgJHebn24iz">Araceli Mitchell</option>
      <option value="nF4aZxcpqLjLgZo3G">Kameron McClure</option>
 </select>
<i class="dropdown icon"></i>
<div class="text">Araceli Mitchell</div>
<div class="menu" tabindex="-1">
  <div class="item active selected" data-value="tkJNyQJgJHebn24iz">Araceli Mitchell</div>
  <div class="item" data-value="nF4aZxcpqLjLgZo3G">Kameron McClure</div></div>
</div>

In order to grab the value or text I used:

userIdSelected = $('.ui.selection').dropdown('get value')
userNameSelected = $('.ui.selection').dropdown('get text')

Note that to trigger the change event I used the #id as follows:

'change #employeeDropdown'