Meteor Startup JQuery DOM Elements Not Ready (JQueryUI Draggable)

javascript, jquery, meteor, startup, templates

Solution

I'm guessing your code looks something like this, but let me know if I'm wrong:

<template name="list">
  {{#each items}}
    {{> item}}
  {{/each}}
</template>

The `{{#each ...}}` helper works with a cursor object to respond to data changes on the cursor. So, in your case, if that data is coming from the server (e.g. a subscription), at the time of Meteor.startup, the data might not have been loaded yet. So initially your list will be empty. Then, as data comes off the wire a new `item` template will be rendered for each data item. If you want to make a specific item draggable, you could put that jQuery code in the `Template.item.rendered` callback.

Does this help?

Problem

In the Meteor docs it says that `Meteor.startup` will be called after the DOM and all templates have been processed. However, my code within `Meteor.startup` is acting as if the DOM elements aren't there. In .js: ``` Meteor.startup(function () { console.log($('.draggable').length); }); ``` In .html: ``` <template name="item"> <div class="draggable ui-widget-content"> </div> </template> ``` In the console I see: 0 But on the page I can see my items. And indeed if I include my JQuery in `Template.item.rendered` or in a `mouseover` event, I get the correct length of the array. So why would the `startup` function not have my DOM elements ready to use?

Original source