The SPA navigation file keeps finding an errors when trying with a bootstrap navbar.

[kva-adrian]

The Single Page App navigation (I am using the jQuery one) always causes errors when Bootstrap is added. The page never appears when clicked, but the URL changes. However if I refresh, then the page does appear. What am I doing wrong?

I keep getting an error on in Navigation.js at line 42 for me - PageName = link.attr("[href]").substr(1); (Uncaught TypeError: Cannot read property 'substr' of undefined)

[curran]

It's hard to tell what the issue is without a full reproduction case. Can you share the full code?

The error indicates that link.attr("[href]") is returning undefined. I'm not sure how link is defined.

Also, that video is quite old and the versions of both jQuery and Bootstrap have incremented many times since then, possibly with breaking changes.

[kva-adrian]

Thanks for the reply Curran. I actually got it to work. I assume as Bootstrap has many navbar menu links that use the <ul> <li> tags - https://www.bootply.com/JdmcsrboOY (my navbar example), it caused some error. In the second line of the function setActiveLink (at the end), i had initially just called the ID of the <nav> and then the <a> tag: $("#nav-main a").each(function....

I then remembered I was having a CSS issue stylizing the nav links until I defined the whole thing (example: .navbar ul.nav li a:hover{color:red}.

After some trial and error, I changed it to ul#nav-main li, and it worked. The only small quirk now is when I refresh a page, it seems to load the index page first, then it reloads the correct page.

 function setActiveLink(fragmentId){
$("ul#nav-main li").each(function (i, linkElement) { 
  var link = $(linkElement),
    pageName = link.attr("[href]").substr(1);
  if(pageName === fragmentId) {
    link.attr("class", "active");
  } else {
    link.removeAttr("class");
  }
});
 }

But thanks again.

[curran]

Great!