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" [email protected] 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 https://github.com/d0minikk/materialize-meteor/issues/2#issuecomment-68447746 .

[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" [email protected] 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 https://github.com/d0minikk/materialize-meteor/issues/2#issuecomment-68457056 .

[code-griffin]

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

[code-griffin]

@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.

[code-griffin]

@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

[code-griffin]

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.