Witam,
Taka sytuacja. Mam projekt w Mavenie, aplikacja webowa. Jeśli skrypt js zamieszczę w pliku jsp to działa bez zarzutu. Problem zaczyna się, kiedy kod js umieszczę w osobnym pliku.js i odwołam się do niego z pliku jsp. W przeglądarce dostaję komunikat jak poniżej:
Po kliknięciu na link display.js:2 otwiera mi się cały wyrenderowany kod strony startowej zamiast kod js.
Podejrzewam, że może chodzić o konfigurację Mavena, ale za krótko jeszcze się tym bawię, żeby wpaść na pomysł o co chodzi.
Poniżej kod counter-list-jsp:
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Counter Management Application</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"
type="text/javascript"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark"
style="background-color: tomato">
<div>
<a href="https://www.javaguides.net" class="navbar-brand">
Counter Management App </a>
</div>
<ul class="navbar-nav">
<li><a href="<%=request.getContextPath()%>/list"
class="nav-link">Counter</a></li>
</ul>
</nav>
</header>
<br>
<div class="row">
<!-- <div class="alert alert-success" *ngIf='message'>{{message}}</div> -->
<div class="container">
<h3 class="text-center">List of Counters</h3>
<hr>
<div class="container text-left">
<a href="<%=request.getContextPath()%>/new" class="btn btn-success">Add
New Counter</a>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Capacity</th>
<th>CounterValue</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- for (Todo todo: todos) { -->
<c:forEach var="counter" items="${listCounters}">
<tr>
<td><c:out value='${counter.idCarPark}' /></td>
<td><c:out value="${counter.name}" /></td>
<td><c:out value="${counter.capacity}" /></td>
<td><c:out value="${counter.counterValue}" /></td>
<td><a
href="edit?id=<c:out value='${CarParks.idCarPark}' />">Edit</a>
<%-- <a
href="delete?id=<c:out value='${user.id}' />">Delete</a></td> --%>
</tr>
</c:forEach>
<!-- } -->
</tbody>
</table>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Capacity</th>
<th>Free spaces</th>
</tr>
</thead>
<tbody>
<!-- for (Todo todo: todos) { -->
<c:forEach var="counter" items="${listCounters}">
<tr>
<td><c:out value='${counter.idCarPark}' /></td>
<td><c:out value="${counter.name}" /></td>
<td><c:out value="${counter.capacity}" /></td>
<td id="counter"></td>
</tr>
</c:forEach>
<!-- } -->
</tbody>
</table>
</div>
</div>
<div id="countery">
</div>
</body>
<script>
var myVar = setInterval(getCounter, 1000);
function getCounter(){
$.ajax({
type: "GET",
url: 'counter',
datatype: 'json',
data: {id : 1},
success : function(json) {
console.log('success', json);
$('#counter').text(json);
}
});
}
</script>
<script src="<c:url value="/display.js" />" type="text/javascript"></script>
</html>
i display.js :
var myVar = setInterval(getCounter, 1000);
function getCounter(){
$.ajax({
type: "GET",
url: 'counter',
datatype: 'json',
data: {id : 1},
success : function(json) {
console.log('success', json);
$('#counter').text(json);
}
});
}