[SOLVED] onRendered cannot find the selector

help
1

Hi there,

I have a simple problem but could not get it work, wonder if i missed something?

Template.adminRetailerEdit.onRendered(function() {
	var self = this;

	if (jQuery().datetimepicker) {
		console.log(self.$('.dtpicker').length);    // log 0
	}

	Meteor.setTimeout(function() {
		if (jQuery().datetimepicker) {
			console.log(self.$('.dtpicker').length);    // log 1

			self.$('.dtpicker').datetimepicker({
				pickTime: false,
				endDate: new Date()
			});
		}
	}, 10);
});
2

Does the template depend on subscriptions and/or use Template.subscriptionsReady()? onRendered fires before subscriptions are ready, therefore manipulating elements that depend on those subscriptions with jquery in onRendered will fire too early and find nothing.

3

This is not depends on any subscription. Just plain DOM element in template.

4

Try removing the self here. I’ve sometimes had problems where plugins were not registered on the template instance’s jQuery object, just the global one.

5

I was previously, just use $() to look for the DOM element. But not working, so I try to use the template instead. :frowning:

6

Oh okay, I didn’t see your comments :smile: What happens when you put all your code into Meteor.defer?

7

Indeed. That was what I did for the setTimeout to make it work. (at the moment). But I wonder what I missed.

8

Is your .dtpicker wrapped by any conditionals, loops or so?

1 Like
9

You mean in the markup? Emm AH HA! it was INSIDE {{#with}}!! Thank you so much ! it was because of the waiting for the #with.

Thanks for the help. :smiley:

10

Cool :slight_smile: I think it would be better if the onRendered functions were called after the templating helpers and so … But it doesn’t. Hope it works now!

11

Actually it is fine as long as I know why it is (or it it not) working. :smile: Thanks ya.

12

I have the same problem when my code is wrapped in a #with but I need that to set values in my template. How did you solve this?

13

Sorry, it was 8 months ago, I cant remember what I did, cant even remember which project. Could you post some snippet so we can recall?

14

Hi kenken, thanks for replying. Basically the problem is that any jquery selector within a #with doesn’t work, the example below would be a typical edit form, there is no problem with similar code for a insert form which doesn’t have the #with. I hope this will re-jog your memory because this is driving me nuts as to why it doesn’t work, i’ve also tried many other suggested alternatives but they haven’t worked, i.e. afterflush, defer, etc. It seems more of a problem to do with the #with than anything else. Simplified code below:-

demo.js

Template.demo.onRendered(function () {
// Initialize datapicker
$(’#dateOfBirth’).datepicker({
todayBtn: “linked”,
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: ‘dd/mm/yyyy’
});

demo.html

{{#with demorecord}}

                                            <!-- Date of Birth -->
                                            <div class="form-group">
                                                <label class="col-lg-3 control-label">Date of Birth</label>

                                                <div class="col-lg-9">
                                                    <div id="dateOfBirth" class="input-group date datepicker">
                                                            <span class="input-group-addon"><i
                                                                    class="fa fa-calendar"></i></span><input
                                                            type="text" class="form-control" name="dateOfBirth" placeholder="DD/MM/YYYY"
                                                            value={{formatDate dateOfBirth}}>
                                                    </div>
                                                </div>
                                            </div>

{{/with}}

15

hi kenken, thanks for your reply. Basically my problem is that any jquery code wrapped in a #with doesn’t seem to be working:-

demo.js

Template.demo.onRendered(function () {

// Initialize datapicker
$(’#dateOfBirth’).datepicker({
todayBtn: “linked”,
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true,
format: ‘dd/mm/yyyy’
});
});

demo.html
<template name="demo">
{{#with record}}
<!-- Date of Birth -->
<div class="form-group">
	<label class="col-lg-3 control-label">Date of Birth</label>
	<div class="col-lg-9">
<div id="dateOfBirth" class="input-group date datepicker">
	<span class="input-group-addon"><i
    class="fa fa-calendar"></i></span><input
    type="text" class="form-control" name="dateOfBirth" placeholder="DD/MM/YYYY"
    value={{formatDate dateOfBirth}}>
</div>
{{/with}}
17

Now i tends to split the calendar input into its own template passing in the data and reuse the template whenever possible. But the hack of setTimeout() still works, normally i set 10-100ms.

18

setTimeout() set to 100ms is working, I understand spitting it out into a separate template should work as this will remove the #with. many thanks for helping me resolve it, much appreciated.

1 Like