CODEWITHSUNDEEP
meteor
Nearpoint
Nearpoint

Reputation: 7362

Why is my Meteor app reloading every page when click navigation link?

This is really confusing to me. I am trying to do something very basic.

I have Iron-Router installed and I am just trying to navigate between pages. But it looks like Meteor is reloading the page each time instead of just re-rendering the new page in the yield spot.

So I have a layout file header and a sidebar template, and a yield template.

In the sidebar I use the pathFor helpers to fill in the target href when clicking a link. For example:

  ul.nav.nav-pills.nav-stacked       
    li.active
      a(href='{{pathFor "dashboard"}}', title='Manage Users')
        i.icon-speedometer
        |  Users
    li
      a(href='{{pathFor "adminFarms"}}', title='Farms')
        i.icon-speedometer 
        |  Farms

But the problem is when navigating between those 2 links, Meteor reloads the whole page! Why is this, I feel like I have done this many times in Meteor apps and it just loads the new page in the yield spot. But this time it keeps reloading the whole layout! What is going on, this is so simple yet I don't understand.

Also I cant intercept the click as well. For some strange reason when I add an id to the a link and try and target it in the Template.template.events handler, I can't seem to get it to console.log anything. How come I cannot intercept an event for an a link in Meteor.

UPDATE:

If I remove the class .nav .nav-pills & .nav-stacked from the un-ordered list tag then it works normally. So the issue must be with bootstrap somehow interfering with Meteor single page app functionality. Any clue as to what is going on?

UPDATE 2 Found the issue! It was a package that was included in the theme I was using for multi-level menus. The package is Navgoco, and it was intercepting all the events on anything with the .nav class.

Upvotes: 0

Views: 600

Answers (1)

Ethaan
Ethaan

Reputation: 11376

Try with this event handler.

Template.dashboard.events({ 
  'click a':function(e) {
   e.preventDefault(); 
})

Upvotes: 1

Related Questions