1

私はjspを持っています。リンクが JSP でクリックされると、javascript 関数は、id と名前を持つ 2 つの入力テキスト フィールドを fromDate、toDate として追加します。

fromDateにdatePickerを適用してみました。申請前と申請後にアラートを出しています。両方のアラートを受け取ります。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
4

1 に答える 1

0

ここで 2 つの問題を見つけました。

まず、<script>JSP 内のこのタグが実行され、ページに存在する前に要素に datepicker を追加しようとします。

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

それはうまくいきません。日付ピッカーをインスタンス化する前に、要素がページに存在することを確認する必要があるため、 after でviewFeedback()これらの 2 つの入力を作成するまで待つ必要がありますbuildFeedbackSection()。

第二に、関数でviedFeedback()は、id ではなくクラスで要素を取得しようとしています。これら 2 つの入力フィールドは動的に作成され、「fromDate」と「toDate」の ID を持つと述べました。jQuery (および CSS) では、ID はハッシュ#で表され、クラスはドットで表され.ます。行を変更する必要があります

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

に

$('#fromDate').datepicker({ dateFormat: 'yy-mm-dd'});
于 2013-09-26T16:41:30.427 に答える