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

2 Answers 2

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