Mysterious DOM Errors in template?

help
1

Hello! I’m getting this error when I try to access this.$ in template#onCreated()

Error

Exception in defer callback: Error: Can't use $ on template instance with no DOM
    at Blaze.TemplateInstance.$ (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3516:11)
    at Blaze.TemplateInstance.findAll (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3527:42)
    at .<anonymous> (http://localhost:3000/app/app.js?hash=d005183c715ba9a6da246205dab30282c2c42e1c:445:8)
    at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3341:22
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3687:12)
    at fireCallbacks (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3337:12)
    at .<anonymous> (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3417:5)
    at fireCallbacks (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1955:26)
    at Object.Tracker.nonreactive (http://localhost:3000/packages/tracker.js?hash=6f5d0f5486aaa54b0abe636174eeb06dcc2a736b:617:12)
    at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1952:13

HTML

<template name="sliderPieChart">
      <div class="row sliderPieChart">
        <div class="col-md-12">
          <div class="pie-chart-container center-block">
            <img src="/img/pie-placeholder.png" alt="">
          </div>
        </div>
      </div>
</template>

JS

import './sliderPieChart.html';
import './sliderPieChart.scss';
import { Template } from 'meteor/templating';

Template.sliderPieChart.onCreated(function () {
  // this.findAll('.pie-chart-container'); this doesn't work either
  this.$('.pie-chart-container');
});

I don’t have a clue why this isn’t working. It’s almost as if Meteor can’t “see” my HTML from the JS side. I’m not getting any other errors or warnings except this showstopper.

Does anyone have any idea why I can’t select anything from my template?

2

do it in your onRendered callback, not onCreated

1 Like
3

:heart:
:heart:

Thanks!