Bootstrap 3 navbar links don't work

help
1

I have bootstrap twds via npm installed and used the Bootstrap navbar, but none of the links work. Clicking on them changes the URL to the correct one, but it doesn’t actually go to that page. I have simple links setup like this:

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select item<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/logins/all/">All</a></li>
        <li><a href="/logins/emea">All EMEA</a></li>
        <li><a href="/logins/apac">All APAC</a></li>

Any obvious reason why this doesn’t work?

2

Which router do you use?

3

Hi @lucfranken, I use Flow Router. Here’s a route:

FlowRouter.route('/logins/apac', {
  action: function() {
    BlazeLayout.render("mainLayout", {content: "loginstemplate"});
  }
});
4

To generate the urls in general you can better use a helper:

Does the route get called if you test it with a console.log?
Can you show you dynamic template? https://github.com/kadirahq/blaze-layout#usage

5

Hi @lucfranken, how can I test on console.log? Going to the URL directly works though.

6 
FlowRouter.route('/logins/apac', {
  action: function() {
    console.log('rendering loginstemplate into mainLayout');
    BlazeLayout.render("mainLayout", {content: "loginstemplate"});
  }
});
7

That message is rendered on the console, but only if I manually enter the URL in the browser and press enter. When clicking the actual link on the nav bar, I can see the URL change to the correct one, but nothing happening after that. Shouldn’t it actually go to the page without issue? Here’s my main template:

<template name="mainLayout">

<head>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>Logins Dashboard</title>
    <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
</head>

<body style="background-color:#F2F2F2;">
    <div class="main">
        {{>Template.dynamic template=content}}
    </div>
</body>
</template>
8

Yes it should.

Template seems fine at first sight. You don’t see any errors also on your console?

Where did you put that route? Where is the file located?

9

I put it in a file called routes.js under /lib. I don’t see any errors on clicking no. On the console, my jquery version is “1.11.2”. Could there be something blocking the click event?

10

Your code seems fine. There is something else wrong I suppose.

How does your other route look like? So the route which renders the page.

And then: also put a console log in there, I suppose that one shows up in the console?

On the console, my jquery version is “1.11.2”. Could there be something blocking the click event?

That could be it. Place a simple link somewhere on the page so outside of the menu. Then try again.

11

Same issue. Weirdly, in my navbar, if I put google.com, it goes to Google. Is my jquery version incorrect?

12

Can’t really say that based on the info. You will need to do some debugging. If it works with google.com it looks like an issue in Meteor/FlowRouter not in jQuery.

13

Hi @lucfranken, I think I found the issue but don’t know how to resolve it. I tried putting in a test template, with a different template name, i.e.

<template name="loginstemplate2">
<p>{{test}}
<a href="/logins/apac"> Click me </a>

And routes.js has this new line:

FlowRouter.route('/logins/test', {
  action: function() {
   BlazeLayout.render("mainLayout", {content: "loginstemplate2"});
 }
});

When clicking on the link “Click me” - the template actually renders correctly. The problem is, it refuses to render again if the template being loaded has the same name. All my routes load the same template:

FlowRouter.route('/logins/ssdapac', {
  action: function() {
   BlazeLayout.render("mainLayout", {content: "loginstemplate"});
  }
});

FlowRouter.route('/logins/ssdpemea', {
action: function() {
    BlazeLayout.render("mainLayout", {content: "loginstemplate"});
  }
});

The loginstemplate template has an aldeed:tabular table with a selector, which renders different data based on the URL loaded, so like this:

<div>{{> tabular table=TabularTables.Logins selector=selector class="table table-bordered" width="100%"}} </div>

I think Flow Router refuses to load the template because it’s the same template. Is there a way to force render?

14

Ah clear! Yes that’s intended by FlowRouter and that’s fine for you. You don’t want to re-render the whole template, you just want to re-render the table.

To do that we need to make the selector reactive. Can you show me the helper for selector?

15

Here’s the helper that sends selector to the loginstemplate template:

if (Meteor.isClient) {
    Meteor.subscribe('getlogins');

Template.loginstemplate.helpers({
    'selector': function() {
        get = getproduct();
        return get.selector;
    },
}
16

That helper should become reactive. For a test try to add something like:

Template.loginstemplate.helpers({
    'selector': function() {
        var testReactivity = FlowRouter.getParam('loginProvider');
        get = getproduct();
        return get.selector;
    },
}

Your route becomes something like:

FlowRouter.route('/logins/:loginProvider', {
  action: function() {
   BlazeLayout.render("mainLayout", {content: "loginstemplate"});
  }
});

That should do the trick after some debugging. What you actually want, if this works, is making that getproduct() method reactive. Now it will rerun the helper because I added a reactive function in it.

17

Hi @lucfranken, the problem is, there are several other items on the page that need to be re-rendered as a result of filtered data from MongoDB, e.g. a count of logins. Therefore, I’d like to re-render the template each time a URL change occurs, despite it being the same template on the URL. Is there a way to re-render the whole template?

18

I think this will do that:

Template.loginstemplate.onRendered(function() {
  this.autorun(() => {
      var testReactivity = FlowRouter.getParam('loginProvider');
  });
});

A better fix is to just make the other parts also reactive. That’s basically the standard way how those things work.

need to be re-rendered as a result of filtered data from MongoDB

Mongo queries are by default reactive so that should work by default. If not maybe fix your reactivity.

19

Strangely using that autorun function does not work. Are there any common ways to debug reactivity?

20

We use just console logs mostly but I assume you can also use some kind of debugger. Trick is to have small parts, small templates, and everything reactively working. You are now debugging something which seems to have lots of issues regarding reactivity. Sometimes it’s better to just fix them all.