I'm trying to use Materialize Forms on Meteor. On its Materialize's page it says I should init the "select" input field like this:

$(document).ready(function() {
  $('select').material_select();
});

I've tried calling this on Meteor.startup, Template.body.created - nothing worked. I get the following error:

undefined is not a function (evaluating '$('select').material_select()')

Where should I initialize it?

I'm trying to use Materialize Forms on Meteor. On its Materialize's page it says I should init the "select" input field like this:

$(document).ready(function() {
  $('select').material_select();
});

I've tried calling this on Meteor.startup, Template.body.created - nothing worked. I get the following error:

undefined is not a function (evaluating '$('select').material_select()')

Where should I initialize it?

• javascript
• jquery
• meteor
• materialize

Share Improve this question Follow asked Feb 28, 2015 at 16:16 Aviad Ben DovAviad Ben Dov 6,40922 gold badges3535 silver badges4545 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use the template's .rendered callback

<template name="hello">
    <select><option>...</option></select>
</template>

Then you can have this in your js file

Template.hello.onRendered(function() {
    $('select').material_select();
});

The template is added to the body most likely after rendered has already fired so thats why the body rendered didn't work. If you use .created the DOM hasn't rendered yet.

Akshat's answer is correct but if it still doesn't work for you, there might be a problem with subscription not fired yet or not every needed part of DOM beeing rendered. Use afterflush then.

Template.listing.onRendered(function () {
    var template = this;

    template.subscribe('listOfThings', function () {
    Tracker.afterFlush(function() {
       template.$('select').material_select();
    });
  });
});

Here is a conversation about that: https://github./meteor/meteor/issues/4401#issuement-103340262

And the docs: http://docs.meteor./api/tracker.html#Tracker-flush