I am developing web-project using servlets and jsp. I am building the project in intellij. In the project I have one jsp that manage graphics and user form. graphics.js is responsible for the graphics and for form validation - validator.js.
My problem: Tomcat works correctly with graphics.js but he can't find the validator.js. In the console, I have a 404 message that says there is no validator.js, although it is in the same folder as the graphics.js.
I would be very grateful for an explanation of this situation. I found similar questions, but the answers to them did not help me. I apologize if I repeat one of them
The project structure:
src
ControllerServlet.java
AreaCheckingServlet.java
web
css
style.css
js
graphics.js
validator.js
WEB-INF
Form.jsp
web.xml
Form.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<style><%@include file="/css/style.css"%></style>
<title>web-lab-2</title>
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
</head>
<body>
<div id="canvas" class="one_line">
<canvas id="graphics" height="600px" width="600px"></canvas>
<script>draw(600, 240, 25)</script>
</div>
<div id="input_column" class="one_line">
<form class="js-form">
<div id="x" class="input">
<p>choose the value of x</p>
<input id="x=-4" name="x" type="radio" value="-4">
<label for="x=-4">-4</label><br>
<input id="x=-3" name="x" type="radio" value="-3">
<label for="x=-3">-3</label><br>
<input id="x=-2" name="x" type="radio" value="-2">
<label for="x=-2">-2</label><br>
<input id="x=-1" name="x" type="radio" value="-1">
<label for="x=-1">-1</label><br>
<input id="x=0" name="x" type="radio" value="0">
<label for="x=0">0</label><br>
<input id="x=1" name="x" type="radio" value="1">
<label for="x=1">1</label><br>
<input id="x=2" name="x" type="radio" value="2">
<label for="x=2">2</label><br>
<input id="x=3" name="x" type="radio" value="3">
<label for="x=3">3</label><br>
<input id="x=4" name="x" type="radio" value="4">
<label for="x=4">4</label><br>
</div>
<div id="y" class="input">
<p></p>
<label for="y-inp">choose the value of y</label>
<p></p>
<input id="y-inp" name="y" type="text" placeholder="type a number between -3 and 5" class="y">
</div>
<br>
<div id="r-group" class="input">
<input id="r=1" name="r" type="checkbox" value="1">
<label for="r=1">1</label><br>
<input id="r=2" name="r" type="checkbox" value="2">
<label for="r=2">2</label><br>
<input id="r=3" name="r" type="checkbox" value="3">
<label for="r=3">3</label><br>
<input id="r=4" name="r" type="checkbox" value="4">
<label for="r=4">4</label><br>
<input id="r=5" name="r" type="checkbox" value="5">
<label for="r=5">5</label><br>
</div>
<div>
<label for="submit">Send</label><br>
<input id="submit" type="button" onclick="validate()">
</div>
</form>
</div>
</body>
</html>
graphics.js:
function draw(side, r, mar) {
const canvas = document.getElementById("graphics")
const context = canvas.getContext('2d')
context.fillStyle = (30, 30, 30)
context.globalAlpha = 0.15
context.fillRect(0, 0, side, side)
context.fillStyle = "blue"
context.globalAlpha = 0.65
context.fillRect(side / 2, side / 2, r, -r / 2)
context.beginPath()
context.arc(side / 2, side / 2, r, 0, Math.PI / 2)
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 + r, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.beginPath()
context.moveTo(side / 2, side / 2)
context.lineTo(side / 2 - r / 2, side / 2)
context.lineTo(side / 2, side / 2 + r)
context.fill()
context.fillStyle = "black"
context.globalAlpha = 1;
context.beginPath();
context.moveTo(0, side / 2);
context.lineTo(side, side / 2);
context.moveTo(side / 2, 0);
context.lineTo(side / 2, side);
context.stroke();
context.font = '20px monospace'
context.fillText('-R', side / 2 - r, side / 2 + mar)
context.fillText('-R/2', side / 2 - r / 2, side / 2 + mar)
context.fillText('0', side / 2 - mar * 0.75, side / 2 + mar)
context.fillText('R/2', side / 2 + r / 2, side / 2 + mar)
context.fillText('R', side / 2 + r, side / 2 + mar)
context.fillText('R', side / 2 - mar * 0.75, side / 2 - r)
context.fillText('R/2', side / 2 - mar * 1.5, side / 2 - r / 2)
context.fillText('-R/2', side / 2 - mar * 2, side / 2 + r / 2)
context.fillText('-R', side / 2 - mar * 1.25, side / 2 + r)
console.log("done")
}
validator.js(there is only a message about the correct work for debugging yet):
function validate() {
console.log("donedone")
}
I tried to change the directory with js-scripts, change URLs in the code to "/js/validator.js", "js/validator.js" and "../js/validator.js" (it is worth noting that the graphics.js was correctly located with all these paths), also I tried to search validator.js directly by "localhost:8080/js/validator.js". This didn't work either, but "localhost:8080/js/graphics.js " works.
UPD: I also tried rebuild/clean artefacts. And recreating the project from 0 too
I still didn't understand what the error was. But it helped me to replace the old lines of code:
<script src="${pageContext.request.contextPath}/js/graphics.js"></script>
<script src="${pageContext.request.contextPath}/js/validator.js"></script>
with these:
<script><%@include file="/js/graphics.js"%></script>
<script><%@include file="/js/validator.js"%></script>
UPD: After some research, I assume that the problem was the lack of Tomcat permission to use files from my project folder.