[SOLVED] Dropdown menu doesn't work when I include my navbar in another JSP

Dropdown menu doesn't work when I include my navbar in another JSP

I'm trying to include a navbar.jsp into my other pages The navbar possesses a dropdown menu, which is working when I load navbar.jsp But when I include the navbar into another JSP file, the dropdown menu doesn't work!

I've tried everything, changing the place of the include tag, but nothing seems to work

Another detail: I've tried the same thing with a navbar that I found on a website and... same thing!

Here's my navbar.jsp code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css"> 
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="navbar/navbar.css">
<script src="jquery2.0.3/jquery.min.js"></script>
<script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
</head>

<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">Navigation</a>
    </div>

    <div>
      <ul class="nav navbar-nav">
    <li class="blue"><a href="#"><i class="fa fa-lg fa-home fa-1x">  </i></a></li>
    <li><a href="#"><i class="fa fa-lg fa-search fa-1x"></i></a></li>
    
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-lg fa-desktop fa-1x"></i>
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li class="blue"><a href="#">Link1</a></li>
      <li class="blue"><a href="#">Link2</a></li>
      <li class="blue"><a href="#">Link3</a></li>
      <li class="blue"><a href="#">Link4</a></li>
    </ul>
    </li>
    
    <li><a href="#"><i class="fa fa-lg fa-bar-chart fa-1x"></i></a></li>
  </ul>
  
   <ul class="nav navbar-nav navbar-right">
    <li><a><i class="fa fa-lg fa-user fa-1x"></i>User</a></li>
    <li><a><i class="fa fa-lg fa-sign-out fa-1x"></i>Sign Out</a></li>
  </ul>
  
</div>
 </div>
  </nav>
</body>
</html>

And here's the head of my main page where I included the navbar.jsp (I've tried all possible places)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<jsp:include page="navbar.jsp"/>

<style>

body 
{
padding-top:0;
padding-bottom:50px;
}
</style>

<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css"> 
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
<script src="jquery2.0.3/jquery.min.js"></script>
<script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>

<title>Main</title>
</head>

Solution

You are including jQuery in both you navbar and home JSPs. They are conflicting. Remove any one...