CODEWITHSUNDEEP
htmlspringspring-mvcjsp
TroyanDevops
TroyanDevops

Reputation: 85

Drop down list problem in JSP using Spring MVC

So I've been working on a web application using Spring MVC and JSP, and I faced a problem concerning a drop down list that is supposed to show in all the jsp pages, but once I click on one of the options in the drop down list, it becomes blank in the other pages.

Here is the code of :

-My header.tag :

    <%@ taglib uri="...java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="form" uri="...www.springframework.org/tags/form" %>
    <%@ taglib prefix="dropdown" uri="...www.springframework.org/tags/form" %>
    <%@ taglib prefix="nav" uri="...www.springframework.org/tags/form" %>
    <%@ taglib prefix="dropdown-menu" uri="...www.springframework.org/tags/form" %>
    <%@ taglib prefix="items" uri="...www.springframework.org/tags/form" %>
    <% String ctxPath = request.getContextPath(); %>
    <%@attribute name="headerData" required="false" 
     type="com.project.project.web.dto.HeaderDTOBuilder.HeaderDTO" %>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="/">OnTheGo</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown" >
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Categories <span class="caret"></span></a>
                <ul class="dropdown-menu" >
                    <c:forEach items="${headerData.categories}" var="category" >
                        <li><a href="/products/list${category.name}">${category.name}</a></li>
                        <!--li><a href="/products/list${category.name}">${category.name}</a></li-->
                        <option value="${role}" ${role == SelectRole?'selected="selected"':''}>${role}</option>
                    </c:forEach>
                </ul>

            </li>
            <c:choose>
                <c:when test="${sessionScope.auth == null}">
                    <li>
                        <a href="/register">Register</a>
                    </li>
                    <li>
                        <a href="/login">Login</a>
                    </li>
                </c:when>
                <c:otherwise>
                    <li>
                        <a href="/logout">Logout</a>
                    </li>
                </c:otherwise>
            </c:choose>

        </ul>
        <div class="nav navbar-nav navbar-right">
            <table class="navbar-brand">
                <tr>
                    <td rowspan="2"><a class="glyphicon glyphicon-shopping-cart" href="/cart/read"></a></td>
                    <td>&nbsp;&nbsp; Items &nbsp;</td>
                    <td>Total</td>
                </tr>
                <tr>
                    <td id="count">${headerData.count}</td>
                    <td id="total">${headerData.totalPrice} c</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /.navbar-collapse -->
    <c:set var="Products" value="${headerData.products}" scope="application"/>
</div>
<!-- /.container -->

-My index.jsp

    <%@ taglib uri="...java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib tagdir="/WEB-INF/tags" prefix="tag" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>

<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">

<title>OnTheGo Website</title>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="...oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="...oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

<tag:header headerData="${headerDTO}"/>

<!-- Page Content -->
  <div class="container">

     <div class="jumbotron">
    <h1>Welcome to our shop</h1>
    <p>Welcome to our new online shop! Thanks for coming along to check out our new website.
        We hope that you'll be able to find all the things here that you like so much in the shop,
        but now be able to order them when getting to us is proving a bit of a challenge.
    </p>
</div>


<hr>
<tag:footer/>

</div>
<!-- /.container -->

  < !-- jQuery -->
 <script src="...ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 <!-- Bootstrap Core JavaScript -->
 <script src="...maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


  </body>

</html>

-My 1.jsp (the one that shows after clicking on the first choice of the drop down list):

    <%@ taglib uri="...java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib tagdir="/WEB-INF/tags" prefix="tag" %>

    <%@ page isELIgnored="false" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>OTG Products List</title>


    <link rel="stylesheet" ...maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

    <!-- Custom CSS -->
    <link href="/css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="...oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="...oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    </head>
    <body>

    <tag:header headerData="${headerDTO}"/>

    <div class="container header-spacer">
       <div class="page-header">
         <h3>Equipement
            <small>Products</small>
         </h3>
      </div>


      <link href="/css/productstyle.css" rel="stylesheet">

      <div class="row">
          <div class="column">
            <link href="/css/ColumnStyle.css" rel="stylesheet">
          <div class="wrapper">
            <div class="product-img">
                <img src="...bit.ly/2tMBBTd" height="420" width="327">
            </div>
            <div class="product-info">
                <div class="product-text">
                    <h1>Harvest Vase</h1>
                    <h2>by studio and friends</h2>
                    <p>Harvest Vases are a reinterpretation<br> of peeled fruits and vegetables as<br> functional objects. The surfaces<br> appear to be sliced and pulled aside,<br> allowing room for growth. </p>
                </div>
                <div class="product-price-btn">
                    <p><span>78</span>$</p>
                    <button type="button">buy now</button>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="wrapper">
            <div class="product-img">
                <img src="...bit.ly/2tMBBTd" height="420" width="327">
            </div>
            <div class="product-info">
                <div class="product-text">
                    <h1>Vase</h1>
                    <h2>by studio and friends</h2>
                    <p>Harvest Vases are a reinterpretation<br> of peeled fruits and vegetables 
  as<br> functional objects. The surfaces<br> appear to be sliced and pulled aside,<br> allowing room for growth. </p>
                </div>
                <div class="product-price-btn">
                    <p><span>78</span>$</p>
                    <button type="button">buy now</button>
                </div>
            </div>
        </div>
    </div>

</div>


<!--div class="card">
    <img src="../images/cropped-01.jpg" alt="Denim Jeans" style="width:100%">
    <h1>Rock Jeans</h1>
    <p class="price">$9.99</p>
    <p>Some text about the jeans..</p>
    <p><button>Add to Cart</button></p>
</div-->




 </div>

 <!-- jQuery -->
   <script src="...ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 <!-- Bootstrap Core JavaScript -->
   <script src="...maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

This is a screenshot of what it looks like:The home page

After click page

What do you guys about this problem ??

Upvotes: 0

Views: 874

Answers (1)

Mohit Dodhia
Mohit Dodhia

Reputation: 358

I can't say for certain what is causing the problem here but what I did infer from the images is that the dropdown is a part of a navigation bar. If this navigation bar is to be displayed on every page why don't you make a separate jsp file which contains code only for the navigation bar. It will also be easy to manage.

navigation.jsp

<!-- code for nav bar -->

Now all you need to do is include the jsp page in the pages you want and you will be good to go. Managing CSS and other languages will also become easy.

Include the page like this: <%@ include file="navigation.jsp" %>

I hope this is helpful.

Upvotes: 1

Related Questions