Deactivating Bootstrap Navbar button using AngularJS - javascript

Here I have the code for a bootstrap navigation bar:
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?


You can use function in controller to update variable for active button.
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
$scope.updateActive = function(navButton) {
$scope.btnActive = navButton;
};
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is similar solution.
I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.

Related

Windows confirm - default action not working

I have an Razor view with an href anchor tag. I have an onclick event.
When I click on the link, the confirm prompt appears. However, if I choose "Cancel" it still executes the code - the MVC method.
Here is the Razor view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
#Scripts.Render("~/bundles/modernizr")
<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
#Html.Partial("_NavBar")
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>Functions</strong></a>
</div>
#* Navigation left-handside (sidebar). *#
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-table fa-fw"></i> Delete Account
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderBody()
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
<script type="text/javascript">
function ConfirmDelete(e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
window.location = $(this).attr('href');
}
// Stop the default action.
e.preventDefault();
}
</script>
I tried using jQuery (adding a deleteaccount class to the link) and it does not prompt all. It just goes right to executing the code.
Here is the Razor view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Template/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Template/dist/css/sb-admin-2.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
#Scripts.Render("~/bundles/modernizr")
<link href="~/Template/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
#Html.Partial("_NavBar")
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>Functions</strong></a>
</div>
#* Navigation left-handside (sidebar). *#
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-table fa-fw deleteaccount"></i> Delete Account
</li>
</ul>
</div>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<script src="~/Template/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderBody()
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
<script type="text/javascript">
$('.deleteaccount').click(function (e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
// The button's href will be = to: ?????????????.
window.location = $(this).attr('href');
}
e.preventDefault();
});
</script>

I tried solving your issue, and below is one of the solution:
The default behavior of the a tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false or the event hasn't been prevented.
In your case event is not prevented a you have not passed the event as parameter to your ConfirmDelete() method. Hence both onClick and Href is executed.
So try this Out:
function ConfirmDelete(e) {
if (confirm("Are you sure you want to delete your account? Continue ?")) {
return true;
} else {
return false;
}
// Stop the default action.
// e.preventDefault();
}
<i class="fa fa-table fa-fw"></i> Delete Account

getElementById returns null even though its in HTML

Im trying to find my element in my HTML file, but it returns null even though its there.
I cant find something wrong with my code, neither in the html.
I read the other suggested threads on stackoverflow and have already wrapped it in an onload function, but it still not seem to work.
This is my JS file
window.onload = run();
function run(){
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
This is the HTML file
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>

I believe the issue is not get getElementById returns null
but this line
var archived = localStorage.getItem("arkiv");
Could you please specify if you are really storing the value at localstorage?
Your element is found, check the result before the error (localstorage security error, specific to stackoverflow)
window.onload = run();
function run(){
console.log(document.getElementById("archivedmovies"));
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>

Looks more a problem with your local storage array perhaps? If I code archived by hand the loop is run and object found....
window.onload = run();
function run(){
var archived = 'asddasdasd,asdsdasdas'
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
alert(getUL);
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
}
http://jsfiddle.net/1hwdaL4c/3/

How to change page and maintain the nav bar

i wrote a html script with a simple navbar. The main page is fine but when i click on "About" the page reload and i just want to reload the content and maintain the navbar. I'm using bootstrap. How can i do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- <form class="form-horizontal" action="/action_page.php"> -->
<div class="row">
<div class="col-*-10">
<legend><h2>Title</h2></legend>
</div>
</div>
<p>HOME!!!</p>
</div>
</body>
</html>
And this is my about page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ABOUT!!!!!!!!!!!!!!!!!</p>
</body>
</html>

You're actually supposed to implement such a thing using a router, ui-bootstrap is just a UI library. The ui-router wiki explains how to accomplish this using multiple views per state.
Let's say we have two states in which we want to have a shared navbar, than define 2 states and provide each with 2 views, one navbar and another for the body
Provide each navbar view the same controller and template
$stateProvider
.state('stateA',{
views: {
'navbar#stateA': {
templateUrl: 'navbar.html', // <-- navbar html goes here
controller: 'navbarCtrl'
},
'body#stateA': {
templateUrl: 'report-table.html',
controller: 'StateACtrl'
}
}
})
.state('stateB',{
views: {
'navbar#stateB': {
templateUrl: 'navbar.html',
controller: 'navbarCtrl'
},
'body#stateB': {
templateUrl: 'report-table.html',
controller: 'StateBCtrl'
}
}
})
Inside your markup, you should maintain
<body>
<!-- the router will replace this with your html files -->
<div ui-view="navbar"></div>
<div ui-view="body"></div>
</body>

On the open body tag, make a javascript function named start onLoad="start()" Then within the function set the innerhtml the navbar code.
HTML:
<body onLoad="start()">
<div id="navbar"></div>
</body>
JS:
function start() {
document.getElementById("navbar").innerHTML = "<nav class="navbar navbar-inverse" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>";
}

There are a couple ways to do this without copying the whole navigation bar into every HTML file.
You can put all of the content in the same page and use JavaScript to hide/show specific sections when you click on the menu link
You can use JavaScript to retrieve the new content via AJAX and update the container.
You can add JavaScript to create the navigation bar on the fly for each page you want it on.

Angular Routing not working and not loading content in ng-view

Following is the folder structure I am using for my demo application
css
fonts
images
js
views
index.html
The code for index.html is as follows :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Sandhu Tutors</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Top Navigation-->
<nav class="nav navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ABSS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li><a ng-href="">First</a></li>
<li><a ng-href="">Second</a></li>
</ul>
</div>
</div>
</nav>
<!--Main view goes here -->
<div ng-view></div>
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull=left">
<p> ABSS © Sandhu 2017.</p>
</div>
</div>
</div>
</footer>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/controller.js"></script>
</body>
</html>
And here goes the code for controller.js :
var app = angular.module('myApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'views/home.html',
controller : 'homeCtrl'
})
.when('/first',{
templateUrl:'views/first.html',
controller : 'firstCtrl'
})
.when('/second',{
templateUrl:'views/second.html',
controller : 'secondCtrl'
})
.otherwise({
redirect :'/'
});
});
app.controller('homeCtrl',function($scope){
$scope.name="Angad";
});
app.controller('firstCtrl',function($scope){
$scope.name="Second";
});
app.controller('secondCtrl',function($scope){
$scope.name="Second";
});
Routing doesnt seems to work here .... The only error it shows is :
-Error: [$compile:tpload]
-XMLHttpRequest cannot load
Apart from this if anyone could help as to how to make the desired pages open in the ng-view section on the click of the top navbar buttons ...would be highly appreciated !!

Your code seems to be correct. If you are using chrome as a browser use a local webserver to test your site (for example lite-server). Chrome won't allow you to load local files for security reasons. You could also try and test your application with another browser.
Your Navbar hrefs should look like:
<li>About Us</li>
or if you are using AngularJS 1.6
<li>About Us</li>

Bootstrap navbar won't close

My page, containing a bootstrap navbaar, shows a togglebutton for the menulinks when viewed in smal window. Hiiting this buttons shows the dropdown containing the menuitems but after pressing the togglebutton again it won't close...
Anyone know why?
<html>
<head>
<title>Loket BWL Rapportage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="bwl.css" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="imgLogo" src="Images/arnhemlogo.png" alt="arnhem" />
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>
testlink 1
</li>
<li>
testlink 2
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<table class="table table-bordered">
<tr>
<td class = "header">Onderwerp</td>
<td class = "header">Gegevens</td>
</tr>
<xsl:apply-templates/>
</table>
<!--<br/>
<div style="font-size:12px"><b>Meta-informatie</b></div>-->
</div>
</body>
<script language="JavaScript" src="https://code.jquery.com/jquery.js" />
<script language="JavaScript" src="../Scripts/bootstrap.js" />
</html>

Changing the .js references to:
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" />
did the trick.

Categories