CSS and JS not loading on JSP servlet mapping

Question

When I don't have a servlet attached to a / in servlet mapping

<servlet-mapping>
    <servlet-name>ControllerServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

All my css and javascript frameworks are loading. However, when I added this part of code in web.xml, none of the css and javascript are loading. How do I ensure that the servlet knows that it is a css/js file instead of a method?

web.xml

<context-param>
        <param-name>jdbcURL</param-name>
        <param-value>jdbc:mysql://localhost:3306/bookstore</param-value>
    </context-param>

    <context-param>
        <param-name>jdbcUsername</param-name>
        <param-value>root</param-value>
    </context-param>

    <context-param>
        <param-name>jdbcPassword</param-name>
        <param-value>12345</param-value>
    </context-param>

    <servlet>
        <servlet-name>ControllerServlet</servlet-name>
        <servlet-class>net.codejava.javaee.bookstore.ControllerServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ControllerServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <error-page>
        <exception-type>java.lang.Exception</exception-type>
        <location>/Error.jsp</location>
    </error-page>
</web-app>

ControllerServlet

public class ControllerServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private BookDAO bookDAO;

    public void init() {
        String jdbcURL = getServletContext().getInitParameter("jdbcURL");
        String jdbcUsername = getServletContext().getInitParameter("jdbcUsername");
        String jdbcPassword = getServletContext().getInitParameter("jdbcPassword");

        bookDAO = new BookDAO(jdbcURL, jdbcUsername, jdbcPassword);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String action = request.getServletPath();

        try {
            switch (action) {
            case "/new":
                //showNewForm(request, response);
                break;
            case "/insert":
                //insertBook(request, response);
                break;
            case "/delete":
                //deleteBook(request, response);
                break;
            case "/edit":
                //showEditForm(request, response);
                break;
            case "/update":
                //updateBook(request, response);
                break;
            default:
                listBook(request, response);
                break;
            }
        } catch (SQLException ex) {
            throw new ServletException(ex);
        }
    }

    private void listBook(HttpServletRequest request, HttpServletResponse response)
            throws SQLException, IOException, ServletException {
        List<Book> listBook = bookDAO.listAllBooks();
        request.setAttribute("listBook", listBook);
        RequestDispatcher dispatcher = request.getRequestDispatcher("BookList.jsp");
        dispatcher.forward(request, response);
    }
}

jsp page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>

        <!-- JS -->     
        <script src='static/js/bootstrap.min.js'></script>
        <script src='static/js/vue.min.js'></script>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="static/css/common.css">
     </head>
<body>
    <center>
        <h1>Books Management</h1>
        <h2>
            <a href="new">Add New Book</a>
            &nbsp;&nbsp;&nbsp;
            <a href="list">List All Books</a>

        </h2>
    </center>
    <div align="center">
        <table border="1" cellpadding="5">
            <caption><h2>List of Books</h2></caption>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Author</th>
                <th>Price</th>
                <th>Actions</th>
            </tr>
            <c:forEach var="book" items="${listBook}">
                <tr>
                    <td><c:out value="${book.id}" /></td>
                    <td><c:out value="${book.title}" /></td>
                    <td><c:out value="${book.author}" /></td>
                    <td><c:out value="${book.price}" /></td>
                    <td>
                        <a href="edit?id=<c:out value='${book.id}' />">Edit</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="delete?id=<c:out value='${book.id}' />">Delete</a>                     
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>  
</body>
</html>

Answer 1

You can add your CSS files like below

<LINK REL="StyleSheet" HREF="<%=request.getContextPath()%>/CSS/style.css" TYPE="text/css">

So folder structure would be like below

You need to add your css/js files inside the WebContent

CSS and JS not loading on JSP servlet mapping

Question

1 answers

solution1
1 ACCPTED 2017-12-12 03:21:02

CSS and JS not loading on JSP servlet mapping

Question

1 answers

solution1 1 ACCPTED 2017-12-12 03:21:02

solution1
1 ACCPTED 2017-12-12 03:21:02