FlowRouter triggersEnter not running jQuery on initial page load?

I’m having some trouble with basics in FlowRouter. FlowRouter version is current in current version of Meteor.

On initial page load (or refresh), the triggersEntry function does print to the console log - but it does not run the jQuery. If user navigates to a different template in the same layout, then returns to this template, then the jQuery DOES run.

Why isn’t it running on initial page load? What is the best way to make it do so?

FlowRouter.route( '/about', {
  action: function() {
    BlazeLayout.render( 'body-static', { 
      content: 	'about',
    });
  },
  triggersEnter: [function() {
    $('a.about').addClass('active');
    console.log('entry trigger ran');
  }]
});

Sounds like the DOM hasn’t loaded enough yet to let you manipulate it with jQuery. Try wrapping your addClass call in a Meteor.defer. So something like:

  ...
  triggersEnter: [function() {
    Meteor.defer(() => {
      $('a.about').addClass('active');
      console.log('entry trigger ran');
    });
  }]
  ...

Alas, the same behavior still persisted. It’s really a puzzle.

The jQuery request works on load if I use it elsewhere (in my core UI js file that handles front end, in the “about" template itself… ) but in the router on enter and exit is the most elegant. I don’t want to do anything hacky like put it in the template for the first load as well as in the routes.js for all the other loads.

Thank you for the idea - that’s a handy example and a good one to have in my FlowRouter pocket. Any other ideas?

I believe the easiest place to add jquery functions is Template.onRendered. The only time this has not worked for me was for working alongside TinyMCE.

My experience with trying to add JQuery via triggers on routes was… messy

Thank you, I will try this – where does the Template.onRendered go??? In the routes.js, in the template, or where?

One of my frustrations with Meteor docs is that they give you some code but don’t tell you where to put it. Even hours of Googling never seems to clarify where the different parts go. Last night I was up til 6 a.m. with trying to figure out things like this.

Meteor is kind of in a state of transition right now, from a fairly closed framework in to a framework that is open and modular. Documentation for new users is lacking right now, as most of the old documentation (such as DiscoverMeteor) still work - but are using the older methods of doing things.

To answer your question, lets say you have a template w/ filename “myTemplate.html”, and the template itself is , then you can create a file named “myTemplate.js”, and include this:

Template.myTemplate.onRendered( function () {
    // insert code you would normally put in document ready here
});
1 Like

I love you!!! May Meteors smile upon you, may Atmospheres descend lightly with excellent good things for you, may asteroids never shower bugs upon your app - thank you!!!