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 }); });

-------------Problems Reply------------

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
});
});

Category:javascript Views:3 Time:2017-06-04

Related post

  • How to use jQuery code instead of EXT JS code 2011-07-20

    In my web application I have used EXT JS code. Currently I am moving EXT JS code to jQuery code. Below is my EXT JS code, it contains form panel statements: var signInForm = new Ext.FormPanel({ renderTo: Ext.get('sign_In_Form'), labelWidth: 125, labe

  • How to use jquery code in Internet Explorer? 2010-05-02

    I put some jquery in my website that makes the text move to the right when the page changes. It works in Firefox and Safari but it doesn't work in Internet Explorer. My url to my website: http://katieduck.com/Courses/Improvisation%20Winter%20Course%2

  • How to use jquery correctly in SharePoint Web Part - jquery doesn't always fire 2009-06-06

    I'm learning how to use jquery with SharePoint. My example draws a red box inside the Content Editor Web Part when a link is selected. My code works when the SharePoint page is in edit mode but not after I've left the page and returned in non edit mo

  • ASP.net dynamic drop down lists, how to use JQuery and AJAX instead? 2009-10-08

    I have written some code that works using ASP.Net, C# and AJAX update panels. I have created this user control, in which a repeater is populated by the contents of the BusinessTier datatable. For each business tier, there are associated business leve

  • How to use this code as Unobtrusively? 2010-08-19

    How to use this code as Unobtrusively? To keep content and Behaviour separate. <a href="nojavascript.html" onclick="functionName(); return false;" onkeypress="functionName(); return false;">Link text</a> --------------Solutions-----------

  • How to use jQuery with in xhtml? 2010-10-08

    i am using facelets,richfaces,and ajax, in XHTML i am facing error while creating datepicker! What is the solution for my problem? the code is: <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • How to make zebra table with Sphinx? Or how to use jQuery with Sphinx? 2010-12-21

    I think the table generated from Sphinx is not pretty, as it produces the following HTML code for table. <table border="1" class="docutils"> <colgroup> <col width="43%" /> <col width="29%" /> <col width="29%" /> </col

  • How to use this code working if i use web user control of asp.net? 2011-01-27

    How to use this code working if i use web user control of asp.net ? </head> <body> <form id="form1" runat="server"> <div> <asp:CheckBox ID="CheckBox1" runat="server" /><br /> <asp:CheckBox ID="CheckBox2" runat="

  • how to execute jquery code one by one? 2011-06-07

    how to execute jquery code one by one? I want first do "function 1", when finish the job. then do "function 2"... Thanks. <script type="text/javascript"> jQuery(document).ready(function(){ $(document).ready(function(){ //function 2, jqeury.ajax

  • How to Use jQuery .each() to Create a JSON Array or Object 2011-07-24

    I've seen a lot of examples that site how to use jQuery and .each() to parse json arrays. What I want to do is use the .each() function to create the json. I'm getting input from the user regarding text boxes that will be used in an ajax call to sort

  • how to use jquery and link_to_function in rails 3.1 2011-08-16

    I can't figure out how to use jquery and link_to_function in rails 3.1. i have been working with episode 197 of railscasts but it won't work with 3.1 http://railscasts.com/episodes/197-nested-model-form-part-2 firebug is giving me the error remove_fi

  • how to use jquery make this? 2011-10-26

    http://www.lingerie.com/ how to use jquery to make the LATEST NEWS: part which on the toppest of the page. supposed the html code is: <ul id="latest"> <li><a href="#">example one</a></li> <li><a href="#">exam

  • How to use jQuery Validation plugin on button click 2014-10-11

    I am trying to execute a jQuery Validation plugin but getting a little issue. On the same button I have to first perform validation, and when the validation successful it execute some other jQuery code by getting the id of this button. for example vi

  • How to use jQuery to produce TinyURL 2009-07-10

    I'm trying to build a jQuery function that will allow me to produce a TinyURL from some other link for micro blogging reasons (yes, twitter)... I found this tutorial from James Padolsey, but am not getting a response back from the call. http://james.

  • How to use jQuery to change the backgound color of a textbox? 2009-08-03

    How to use jQuery to change the backgound color of a textbox? --------------Solutions------------- Better practice is to seperate UI from logic, in your case: $("#textboxid").addClass("aClass"); If you really need it your way, then do the following:

  • How to use JQuery to call a servlet 2010-08-10

    How to use JQuery to call a servlet which I usually call like this http://localhost:8080?a=1&b=2&c=3. I particularly want to find out how to pass URL params. --------------Solutions------------- $.ajax({ url: 'http://localhost:8080', data: {a

  • how to use jquery time picker? 2010-08-12

    dear all..i'm newbie at time picker. can you tell me how to use jquery time picker after download? how to make it show inside form? --------------Solutions------------- Here $(function(){ $('#test-1').timepickr({ handle: '#trigger-test' convention: 1

  • how to use jquery to remove option from select box 2010-11-30

    How to use jquery to delete opt1 row ? How about changing opt2 to become selected? Note that the values are random numbers. <select name="ShippingMethod" > <option value="8247(random)">Opt2</option> <option value="1939(random)" s

  • How to use jQuery to find a link within the div with a certain class and make it inactive 2011-01-12

    How to use jQuery to find a link within the div with a certain class and make it inactive, that is to deprive the property links to her it was impossible to push. --------------Solutions------------- $("div.someClass").find("a").removeAttr("href"); o

  • How to use jquery scrolltop from jquery ajax handle page? 2011-05-18

    How to use jquery scrolltop from jquery ajax handle page? page aa.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Con

  • how to use jquery to drag and drop from multiple tabs 2011-06-14

    im building a toolbox application that has panes of items that can be dropped onto a canvas. problem is.. when i build the application i want multiple tabs of items that can be dropped on to a canvas(div) and the co-ordinates recorded I have seen som

  • How to use jQuery Split with 2 Arguments? 2011-06-20

    I am wondering how to use jQuery.Split() with an "OR" - i.e. like [email protected], [email protected],[email protected] So it returns like [email protected] [email protected] [email protected] But notice the ",<space>" and ","

  • How to use Jquery weird character in Chrome? 2011-06-27

    I create a jquery script to parse out the Yahoo Weather XML. It's work in Firefox and IE8+ but not in Chrome. Any one could help me, point out why this script doesn't work in latest Chrome? $.get('http://someofmyurl.dom/feed/ywread.php', function (da

  • How to use jquery blockUI 2012-04-23

    I want to use jQuery blockUI but on their site they have not given what js to include, what css to use. Can sombody please give me a example with complete js and css included to show how to use jQuery blockUI. --------------Solutions------------- All

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.168 (s). 11 q(s)