I have two jsp files.i want to keep them separate and include one into another.. The jquery tag is included in both jsp files. when i include on file into another the jquery functions do not work fine...how can i avoid jquery being included twice with jsp include tag.
the jsp files are as follows
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( ".datepicker" ).datepicker();
} );
</script>
<script type="text/javascript">
function checkDate(){
console.log("inside checkDate");
var sdate = document.getElementsByName("startDate");
var edate = document.getElementsByName("endDate");
var reason = document.getElementsByName("reason");
var startDate = new Date(sdate);
var endDate = new Date(edate);
if(startDate > endDate) {
alert("Please check the date");
return false;
}
if(reason == ""){
alert("reason cannot be blank");
return false;
}
return true;
}
</script>
</head>
<body style="background-color:powderblue" >
welcome ${pageContext.request.userPrincipal.name} <br><br><br>
<%-- <sec:authentication property="principal.authorities" var="authorities" /> --%>
<%-- <c:forEach items="${authorities}" var="authority" varStatus="vs">
<!-- <p>${authority.authority}</p>
<p>${authority}</p>
-->
<c:if test = "${ (authority == 'ROLE_MANAGER') && (hasReords == true)}">
<jsp:include page="manager.jsp"></jsp:include>
</c:if>
</c:forEach> --%>
<br><br>
<h1>Apply your leave here</h1>
<form:form method="GET" modelAttribute="captureLeave" action="/applyLeave" onsubmit="return checkDate()" >
<label for="datepicker"> start date</label>
<input type="text" name="startDate" placeholder="start date" class="datepicker" id="startDate"/> <br>
<label for="datepicker">end date</label>
<input type="text" name="endDate" placeholder="end date" class="datepicker" id="endDate"/> <br>
<label > Reason</label>
<input type="text" name="reason" placeholder="Reason" id="reason"/> <br>
Type of leave
<select name="leaveType">
<option value="casual">Casual</option>
<option value="sick">Sick</option>
</select>
<input type="submit" value="submit"/>
</form:form>
<br><br>
<form method="POST" action="/logout">
<input type="submit" value="logout">
<%-- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> --%>
</form>
</body>
</html>
the other jsp file is as follows
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Manager Action</title>
<script>
function myFunction(name, transactionId){
console.log("name passed is "+name+" transaction id is "+transactionId);
alert(name);
$.ajax({
type : 'POST',
url : '/managerAction',
data: {'managerAction': name,
'transactionId': transactionId},
success : function(response) {
alert(response);
},
error : function() {
alert("opps error occured");
}
});
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Employee Name</th>
<th>Leave Applied</th>
<th>Start Date</th>
<th>End Date</th>
<th>Date Applied</th>
<th>Reason for applying leave</th>
<th>Take Action</th>
</tr>
</thead>
<c:forEach items="${employeeRecords}" var="juniors">
<tbody>
<c:forEach items="${juniors.leaveTransactions}" var="leaveRecords">
<tr>
<td>
${ juniors.getName()}
</td>
<td>
${leaveRecords.getLeaveType()}
</td>
<td>
${leaveRecords.getStartDate()}
</td>
<td>
${leaveRecords.getEndDate()}
</td>
<td>
${leaveRecords.getApplyDate()}
</td>
<td>
${leaveRecords.getReason()}
</td>
<td>
<form>
<button type="button" name="Approve" formaction="/managerAction" onclick="myFunction(this.name, ${leaveRecords.getTrans_id()})">Approve</button>
<button type="button" name="Reject" formaction="/managerAction" onclick="myFunction(this.name, ${leaveRecords.getTrans_id()})">Reject</button>
</form>
</td>
</tr>
</c:forEach>
</tbody>
</c:forEach>
</table>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</body>
</html>
when i include manager jsp in welcome jsp the datepicker does not work..but when manager jsp is not included welcome jsp works fine.. i think the issue is that jquery is included twice..how can i resolve this issue?
Please put your date picker code into $(document).ready(...)
$(document).ready(function() {
$( function() {
$( ".datepicker" ).datepicker();
} );
});
Any chunks code which you realize that shouldn't execute before jquery tag should be put inside $(document).ready(...)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.