Bootstrap 3 navbar links don't work

help
21

Thanks. I’m trying to implement the below code but where do I put it? It’s from here: https://kadira.io/academy/meteor-routing-guide/content/accessing-the-url-state

Tracker.autorun(function() {
FlowRouter.watchPathChange();
var context = FlowRouter.current();
// use context to access the URL state
});
22

Just on the client side not inside anything. So don’t put it in a helper or something. Anyway you are now trying to band-aid better try to solve your real issue because this way you will get so many more reactivity issues in the future.

23

Yeah, I’ll see where it’s going wrong. Also, I just realized I didn’t import flow router to my JS file with the helpers. Noob question but should I use this to import it?

import { FlowRouter } from 'meteor/kadira:flow-router';
24

Hi @lucfranken, thanks for your help on this so far. I just realized my template data changes based on the incoming URL, where my imports/ui/getlogins.js has this outside of IsClient:

var urlparts = location.href.split('/');
var urlid = urlparts.pop();

function getproduct() {
switch (urlid) {  
case 'ssemea':
//query Mongo
return selector;
case 'aademea':
//query Mongo
return selector:
};

This selector then goes into the template helper. Is this why selector isn’t being reactive?

25

Yes, use that getParam() method and it will become reactive.

26

OMG that worked!! Every component became reactive after putting the getParam() method in my getproduct() function. Thanks for your help @lucfranken

27

Welcome to the world of reactivity! :slight_smile:

1 Like
28

@lucfranken so it looks like the reactivity works only after a second change of URL, e.g.
Let’s say I choose mysite/url1. It works.
Now if I click on url2, there’s no update.
But if I click on url3, it renders the page to url2.

Seems like there is a lag of 1 URL. What’s the best way to get my getproduct() function to be reactive? It needs to re-run for any change in URL.

29

Sorry, can’t see you whole codebase so I can just guess what you can do:

console.log those functions to debug, then you see where reactivity kicks in and where it does not. If you know where it does not respond show the code then I can help you further.

Here is some basic documentation with which pieces are reactive and which are not:
https://www.discovermeteor.com/blog/reactivity-basics-meteors-magic-demystified/

30

Thanks. It looks like the issue I’m having is not that reactivity fails, but that the reactivity lags by 1 step. I created this function to get the URL:

function geturl() {
var testReactivity = FlowRouter.getParam('loginProvider');
var urlid = new ReactiveVar(0);
urlid = location.href.split('/').pop();
console.log('geturl is working');
return urlid;
};

Now if I click around my nav bar, the templates do re-render, however with a 1 URL lag. So if I click on url1, nothing happens. But if I click on url2, url1 renders. Very strange.

31

@lucfranken, turns out all I needed was to make getproduct() reactive like you said, but I was using JS functions like location.href.split(’/’).pop(); to get the URL, when all I needed to do was use this:

function getproduct() {
    var testReactivity = FlowRouter.getParam('loginProvider');

This made the entire thing reactive and properly too. Thanks for your help.

1 Like