CODEWITHSUNDEEP
javascriptjquerymeteor
majka
majka

Reputation: 21

How to use jQuery code in meteor?

so I can't make run JQuery code in meteor! I have added package meteor add jquery.

Solutions: make jquery run in meteor OR convert JQuery code to JS code

Somebody knows how to solve it?

thanks a lot for your help!

Example

$(document).ready(function() {
    $('.collapsible').collapsible({
        accordion: false
    });
});

Upvotes: 2

Views: 1494

Answers (1)

saimeunt
saimeunt

Reputation: 22696

You don't need to explicitly add the jquery package inside a Meteor project because it usually already includes packages depending on jquery (namely the templating packages).

However, you can't just copy jQuery code examples inside a Meteor app and expect them to work without a little bit of extra work : in particular you need to initialize jQuery plugins only when the corresponding DOM elements have been inserted in the DOM by Blaze, the Meteor template rendering engine.

Assuming that you have the following (MaterializeCSS) template markup :

<template name="collapsible">
  <ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>
</template>

You'll need to initialize the collapsible plugin inside an onRendered lifecycle event :

Template.collapsible.onRendered(function(){
  // we're using the template instance scoped jQuery
  this.$('.collapsible').collapsible({
    accordion: false
  });
});

Upvotes: 2

Related Questions