Question

我有两个jsp文件。我想将它们分开并包含其中一个。两个jsp文件中都包含jquery标记。当我将文件包含到另一个文件中时，jQuery函数无法正常工作...如何避免将jsp包含在jsp include标签中两次。

jsp文件如下

<%@ 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>

另一个jsp文件如下

<%@ 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>

当我在welcome jsp中包含manager jsp时，datepicker不起作用..但是当不包含manager jsp时，welcome jsp可以正常工作。我认为问题是jquery包含了两次。如何解决此问题？

Answer 1

请将您的日期选择器代码放入$(document).ready(...)

$(document).ready(function() {

   $( function() {
        $( ".datepicker" ).datepicker();
      } );
});

您意识到在将jquery标记放入$(document).ready(...)之前不应该执行的任何块代码

将jsp文件包含到其他jsp文件中时，jquery包含两次

1 个答案: