Question

我有一个jsp。在JSP中单击链接时，javascript函数会将两个输入文本字段添加为id，其名称为fromDate toDate。

我尝试将datePicker应用于fromDate。我在申请之前和申请之后发出警报。我得到了两个警报。没有java控制台错误。但是datePicker并没有应用于fromDate。

我想知道问题出在哪里。如果有人能在这方面表现出色，我将不胜感激，

-Indu

我的JSP文件：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SB Reports</title>
</head>
<body>
<div id="main">
<c:import url="SBUserNameDisp.jsp" />
<div class="mid-area">
<h2>Reports</h2>

<table border="5" width="970">
<tr>
<td style="vertical-align: top" width="100">
<c:import url="DispUserMenu.jsp" />
</td >
<td style="vertical-align: top" width="100">
<p class="subheading">Reports</p>
<a href="#" onclick="viewFeedback()">View Feedbacks</a>
</td>
<td width="770" style="vertical-align: top" id="displayDataCell">  
    <p class="subheading" align="center"><br><br><br><br><br><b>Report Area</b>
 </p>
</td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="resources/js/jsFunctions.js"/></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" media="screen" type="text/css" 
  href="resources/css/datepicker.css" />
<script type="text/javascript" src="resources/js/datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
//$("#datepicker").datepicker("setDate", new Date());
    $("#fromDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
    $("#toDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
  });

</script>

</html>

我的.js功能

function viewFeedback(){
var displayDataCell = document.getElementById("displayDataCell");
displayDataCell.innerHTML = buildFeedbackSelection();
alert("INDU1");
setDateForDatepicker();
$('.fromDate').datepicker({ dateFormat: 'yy-mm-dd'});
alert("INDU2");
} // viewFeedback

function setDateForDatepicker(){
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
if(day < 10)   { day = '0' + day;}; 
if(month < 10) { month = '0' + month;};
var my_date = year + "-" + month + "-" + day;
document.getElementById("fromDate").value=my_date;
document.getElementById("toDate").value=my_date;
} // setDateForDatePicker

function buildFeedbackSelection(){
var str = "";
var qte = "\"";
var date = "";

str += "<table valign=" + qte + "top" + qte + " border=" + qte + "0"
+ qte + " width=" + qte + "100%" + qte + ">";
str += "<tr>";
str += "<td>";
str += "From Date <input type=" + qte + "text" + qte 
    + " id=" + qte  + "fromDate" + qte 
    + " name=" + qte + "fromDate" + qte
    + " value=" + qte + date + qte 
    + " class=" + qte + "hasDatepicker" + qte + ">";
str += "</td>";
str += "<td>";
str += "To Date <input type=" + qte + "text" + qte 
    + " id=" + qte  + "toDate" + qte 
    + " name=" + qte + "toDate" + qte 
    + " value=" + qte + date + qte 
    + " class=" + qte + "hasDatepicker" + qte + ">";
str += "</td>";
str += "<td>";
str += "<input type=" + qte + "button" + qte + "  class=" + qte
    + "btn-bg" + qte + "  onclick=" + qte + "showFeedback()" + qte
    + "  value=" + qte + "Show" + qte + "> &nbsp;&nbsp";

str += "<input type=" + qte + "button" + qte + "  class=" + qte
    + "btn-bg" + qte + "  onclick=" + qte + "deleteFeedback()"
    + qte + "  value=" + qte + "Delete" + qte + ">";
str += "</td>";
str += "</tr>";
str += "<tr>";
str += "<td colspan=" + qte + "3" + qte + "id=" + qte + "reportArea"
    + qte + ">";
str += "<p align=" + qte + "center" + qte + " class=" + qte
    + "subheading" + qte + ">Feedback Data Here</p>";
str += "</td>";
str += "</tr>";
str += "</table>";

return str;
} // buildFeedbackSelection

Answer 1

我在这里发现了两个问题。

首先，JSP中的<script>标记将运行并尝试在页面上存在之前将其添加到元素中：

<script language="javascript" type="text/javascript">
    $(function() {
        //$("#datepicker").datepicker("setDate", new Date());
        $("#fromDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
        $("#toDate").datepicker({ dateFormat: "yy-mm-dd" }).val();
    });
</script>

那不行。在尝试实例化datepicker之前，您必须确保页面上存在元素，因此您必须等到viewFeedback()使用buildFeedbackSection()创建这两个输入之后。

其次，在函数viedFeedback()中，您试图按类而不是按ID获取元素。您提到这两个输入字段是动态创建的，其ID为“fromDate”和“toDate”。在jQuery（和CSS）中，ID由散列#表示，类由点.表示。您将不得不更改行

$('.fromDate').datepicker({ dateFormat: 'yy-mm-dd'});

到

$('#fromDate').datepicker({ dateFormat: 'yy-mm-dd'});

动态输入文本字段JQuery Datepicker无法正常工作

我的JSP文件：

1 个答案: