Javascript not initializing

[boukestam]

Hi, I tried to use your materialize package but the javascript doesn't initialize so the none of the functions work, for instance the labels on textboxes wont slide up. I have the following packages installed:
accounts-base 1.1.2 A user account system
accounts-facebook 1.0.2 Login service for Facebook accounts
accounts-google 1.0.2 Login service for Google accounts
accounts-password 1.0.4 Password support for accounts
chrismbeckett:fontawesome4 4.2.2 Scalable vector icons that can be c...
dsyko:jquery-ui-touch-punch 1.2.4 jquery-ui-touch-punch project, Enab...
email 1.0.4 Send email messages
http 1.0.8 Make HTTP calls to remote servers
iron:router 1.0.0* Routing specifically designed for M...
jquery 1.0.1 Manipulate the DOM using CSS selectors
linto:jquery-ui 1.11.2 jquery-ui 1.11.2 re-packaged for m...
meteor-platform 1.2.0 Include a standard set of Meteor pa...
mizzao:bootstrap-3 3.3.0* HTML, CSS, and JS framework for dev...
natestrauser:x-editable-bootstrap 1.5.2_1 Latest version of X-Editable for ...
rzymek:fullcalendar 2.2.0_2 Full-sized drag & drop event cale...
service-configuration 1.0.2 Manage the configuration for third-...

Any idea what is causing this?

[Dogfalo]

A few things to try:
use jQuery 2.1.1
Make sure you import materialize.js after jQuery
Some Components require you to initialize them in document.ready

[rralian]

I believe I'm running into the same issue here, because the labels are not animating for me, though my markup matches the demo in materializecss. I'm not really sure how I would apply the suggestions above as meteor automatically installs its own required version of jQuery, and handles importing packages within the magical .meteor directory. If you're able to get materialize-meteor working on the latest version of meteor (v1.0.2.1), can you provide a little more specific instruction?

[Dogfalo]

Initialize the javascript after the element is created.
On Dec 31, 2014 10:20 AM, "Bob" notifications@github.com wrote:

I believe I'm running into the same issue here, because the labels are not
animating for me, though my markup matches the demo in materializecss. I'm
not really sure how I would apply the suggestions above as meteor
automatically installs its own required version of jQuery, and handles
importing packages within the magical .meteor directory. If you're able to
get materialize-meteor working on the latest version of meteor
(v1.0.2.1), can you provide a little more specific instruction?

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

[rralian]

Maybe I'm missing it, but I don't see anything in the docs at materializecss about initializing the framework itself or initializing labels specifically.

[Dogfalo]

True. Try taking out the input-field class
On Dec 31, 2014 12:42 PM, "Bob" notifications@github.com wrote:

Maybe I'm missing it, but I don't see anything in the docs at
materializecss about initializing the framework itself or initializing
labels specifically.

—
Reply to this email directly or view it on GitHub
#2 (comment)
.

[vega-soft]

No animation works.
@rralian , how did you solve the problem?
Button animation doesn't work.

[danii1]

For button waves animations to work, you'll have to init this display effect:

Template.name.rendered = ->
  Waves.displayEffect()

I guess the same is true for other things that depend on document.ready

[vega-soft]

@danii1 , It's working.
However it doesn't work when template is updated run time.
{{#each questions}}
button class="waves-effect waves-light btn"> answer me /button
{{/each}}

questions are updated(one questions is added) by someone else real-time.
When i click answer me button for the newly added question, it doesn't work.

This issue applies to all javascripts components (like modal, collapsible ,etc ..)
Any suggestion?

[danii1]

I guess meteor creates hidden view for each element in "each" block, better to check documentation, I guess rendering specific template inside the loop should do the trick:

{{#each questions}}
  {{> question}}
{{/each}}

Don't forget to move "rendered" logic to question view.

[vega-soft]

@danii1 , yes your solution will work.
However, it means that "rendered" logic will run again and again for each loop.

E.g $('.collapsible').collapsible will run X times if it has X number of questions.

[danii1]

You'll have to use this.$('.collapsible') to limit your selector to elements of the template. If you don't like this solution, then you should be able to use this one: http://stackoverflow.com/questions/25486954/meteor-rendered-callback-and-appling-jquery-plugins

[vega-soft]

Template code for collapsible looks like below.

<template name = 'parent'>
<ul class='collapsible'>
{{#each contents}}
{{>myLITemplate}}
{{/each}}
</ul>
</template>

<template name='myLITemplate'>
<li>
<div class="collapsible-header">{{Header}}</div>
<div class="collapsible-body"><p>{{Content}}</p></div>
</li>
</template>

In Javascript. what you mean is.

Template.myLITemplate.rendered = function() {
this.$('.collapsible').collapsible();//however .collapsible is the class for ul tag in parent template.
}

I 'll refer the stack overflow solution.