动态输入文本字段 JQuery Datepicker 不工作答案

【问题标题】：Dynamic input textfield JQuery Datepicker not working动态输入文本字段 JQuery Datepicker 不工作
【发布时间】：2013-09-26 16:22:21
【问题描述】：

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

我尝试将 datePicker 应用于 fromDate。我在申请前和申请后都发出警报。我收到两个警报。没有 java 控制台错误。但是 datePicker 不会在 fromDate 上应用。

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

-工业

我的 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

【问题讨论】：

标签： javascript jquery datepicker

【解决方案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>

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

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

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

到

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

【讨论】：

感谢您的反馈。我将 jquery 标记引用从 . --> # 并从 JSP 中删除脚本。但它仍然无法正常工作。