How to use select2 with Meteor?

Question

Can someone explain to me how select2 works with Meteor? I am using zimme: select2-boostrap3-css and I do not know how to use it.

I checked both the original select2 github page and one of the package . The first explains how to use it without Meteor.

Am I just adding jQuery code to one of my * .js files to make it work?

In HTML:

<select class="input" id="clientName" name="clientName"> {{#each getClients}} <option value="{{clientName}}" data-id={{_id}}>{{clientName}}</option> {{/each}} </select> 

In JS:

 $("#clientName").select2(); 

Because it does not work.

When loading my page, I get this Uncaught TypeError: $(...).select2 is not a function error Uncaught TypeError: $(...).select2 is not a function .

Answer 1

Uncaught TypeError: $ (...). select2 is not a function

The error above is because you did not enable JavaScript for Select2, as indicated in the comments. The atmosphere package that you linked to is only intended to provide the Bootstrap-esque style on top of the existing Select2 package.

You should also include meteor add natestrauser:select2

The next problem you may encounter is that when you run JavaScript <select class="input" > may not load in the DOM, therefore $("#clientName") will not find anything. To wait to initialize Select2 until the page is loaded, you must wrap the code in the ready function qQuery DOM $(function(){}); and wrap it in Meteor.Startup() for a good measure as follows:

 Meteor.startup(function () { $(function(){ $("#clientName").select2(); }); }); 

Working demo on Meteorpad

Further reading :

• How to run jQuery code when a document is ready in Meteor?