Meteor: Using <script> makes jquery script work properly but using {{functionName}} does not work

Question

I am using a third party package. When I use a code the code functions as it should.

<template name ="gamePage">

        <h2>Counting down 15 minutes (900 seconds)</h2>
        <div id="CountDownTimer" data-timer="900" style="width: 1000px; height: 250px;"></div>

    <script>

        $("#CountDownTimer").TimeCircles({ time: { Days: { show: false }, Hours: { show: false }}});

    </script>

</template>

However, when I try to remove the and instead have the javascript function be in the page it does not work.

Template.gamePage.test123 = function() {
    $("#CountDownTimer").TimeCircles({ time: { Days: { show: false }, Hours: { show: false }}});

};

<template name ="gamePage">

        <h2>Counting down 15 minutes (900 seconds)</h2>
        <div id="CountDownTimer" data-timer="900" style="width: 1000px; height: 250px;"></div>

        {{test123}}

</template>

What is the proper way of doing this?

In your script declarations (<head>...</head>), are you loading jQuery or Meteor first? — Dave Chen
– Dave Chen, Commented Oct 11, 2014 at 23:12

David Weldon · Accepted Answer · 2014-10-11 23:18:16Z

1

Remove {{test123}} from your template and use the rendered callback:

Template.gamePage.rendered = function() {
  $("#CountDownTimer").TimeCircles(
    {time: {Days: {show: false}, Hours: {show: false}}}
  );
};

rendered is the proper place to do things like jQuery plugin initialization and anything else that requires DOM elements to first be on the page.

edited Oct 11, 2014 at 23:18

answered Oct 11, 2014 at 23:13

David Weldon

64.4k11 gold badges152 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sean L Over a year ago

This logically makes sense to me, but unfortunately still does not work. If I call $("#CountDownTimer").TimeCircles( {time: {Days: {show: false}, Hours: {show: false}}} ); from the console it works. I tried wrapping it in rendered = function() {Meteor.startup( and also does not work

David Weldon Over a year ago

That's interesting. Does it give you any errors in the console? What version of meteor are you using?

Sean L Over a year ago

Meteor 0.9.3.1, no errors in the console. The package TimeCircles is my first package that I have created. I am wondering if I did all the necessary requirements right, as it may be something with the load order. I am adding the package.js file code. I am stumped, but truly appreciate your help.

David Weldon Over a year ago

Yeah I'm not sure. The path looks a little weird for the api.addFiles - that's relative to the root of the package or the project? I could probably diagnose this in a couple of minutes if I could see the source. Any chance you could create a repo with the bare minimum code do demonstrate the problem?

Sean L Over a year ago

I believe since I had a {{#if}} in there to manage when the code was displayed was the problem. Once I put the code in a new template, such as {{#if xyz}} {{> timeCircle}} the timeCircle.rendered = function worked. I appreciate your help

Collectives™ on Stack Overflow

Meteor: Using <script> makes jquery script work properly but using {{functionName}} does not work

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related