我正在尝试使用jQuery datepicker函数来填充作为hashmap中对象集的一部分的日期字段。
我们使用STRUTS 1来映射表单数据 - 对于我们的大多数数据，这已经足够了。
我之前已经检查并写过这些字段，以便通过手动输入日期来填充它们，现在我想添加jQuery日期选择器以允许用户从弹出日历中选择日期。我正在使用Chrome。下面的代码段。
<script>
$(function() {
$( ".datePick").datepicker({
dateFormat: 'mm/dd/yy',
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText,inst)
{
id=$(this).attr('id');
pos = id.indexOf("(") + 1;
counter = id.slice(pos, -1);
id=id.replace("("+counter+")","");
pieces = dateText.split("/");
$("#"+ id+"MM("+counter+")").val(pieces[0]);
$("#"+ id+"DD("+counter+")").val(pieces[1]);
$("#"+id +"YYYY("+counter+")").val(pieces[2]);
}
});
});
</script>
<!-- "counter" is an integer which keeps track of what iteration of the
hashmap is being accessed, propertyValue is a string that allows me to
dynamically change the property of each form-->
<tr>
<td align="right" colspan="1">
<label for="setOfObjectsStartMMDtH("+counter+")">
<%=label.makeLabel(XXXXForm.FORM_KEY_VALUE)%></label>
</td>
<td align="left" colspan="4">
<% propertyValue="setOfObjectsStartDtHMM("+counter+")";%>
<html:text property="<%=propertyValue%>" styleId="<%=propertyValue%>"
size="2" maxlength="2"/> /
<% propertyValue="setOfObjectsStartDtHDD("+counter+")";%>
<html:text property="<%=propertyValue%>" styleId="<%=propertyValue%>"
size="2" maxlength="2"/> /
<% propertyValue="setOfObjectsStartDtHYYYY("+counter+")";%>
<html:text property="<%=propertyValue%>" styleId="<%=propertyValue%>"
size="4" maxlength="4"/>
<% propertyValue="setOfObjectsStartDtH("+counter+")";%>
<html:hidden styleId="<%=propertyValue%>" property="<%=propertyValue%>"
styleClass="datePick"+counter></html:hidden>
这是我的吸气者和二传手的样子。
private final HashMap setOfObjects = new HashMap();
/**
* @param startDtH the setOfObjectsStartDtH to set
*/
public void setSetOfObjectsStartDtH(String key, String startDtH) {
setOfObjects obj = getSetOfObjects(key);
obj.setStartDtH(startDtH);
}
/**
* @return the startDtH
*/
public String getSetOfObjectsStartDtH(String key) {
if(setOfObjectss.containsKey(key)){
SetOfObjects obj = getSetOfObjects(key);
return obj.getStartDtH();
}
return "";
}
/**
* @param startDtHDD the startDtHDD to set
*/
public void setSetOfObjectsStartDtHDD(String key, String startDtHDD) {
SetOfObjects obj = getSetOfObjects(key);
obj.setStartDtHDD(startDtHDD);
}
/**
* @return the startDtHDD
*/
public String getSetOfObjectsStartDtHDD(String key) {
if(setOfObjectss.containsKey(key)){
SetOfObjects obj = getSetOfObjects(key);
return obj.getStartDtHDD();
}
return "";
}
/**
* @param startDtHMM the startDtHMM to set
*/
public void setSetOfObjectsStartDtHMM(String key, String startDtHMM) {
SetOfObjects obj = getSetOfObjects(key);
obj.setStartDtHMM(startDtHMM);
}
/**
* @return the startDtHMM
*/
public String getSetOfObjectsStartDtHMM(String key) {
if(setOfObjectss.containsKey(key)){
SetOfObjects obj = getSetOfObjects(key);
return obj.getStartDtHMM();
}
return "";
}
/**
* @param startDtHYYYY the startDtHYYYY to set
*/
public void setSetOfObjectsStartDtHYYYY(String key, String startDtHYYYY) {
SetOfObjects obj = getSetOfObjects(key);
obj.setStartDtHYYYY(startDtHYYYY);
}
/**
* @return the startDtHYYYY
*/
public String getSetOfObjectsStartDtHYYYY(String key) {
if(setOfObjectss.containsKey(key)){
SetOfObjects obj = getSetOfObjects(key);
return obj.getStartDtHYYYY();
}
return "";
}
private SetOfObjects getSetOfObjects(String key){
if(setOfObjects.containsKey(key))
return (SetOfObjects)setOfObjects.get(key);
SetOfObjects set = new SetOfObjects();
set.setId(Integer.parseInt(key));
setOfObjects.put(key, set);
return set;
}
以下是SetOfObjects的样子：
public class SetOfObjects{
private String startDtH = "";
private String startDtHMM = "";
private String startDtHDD = "";
private String startDtHYYYY = "";
/**
* @param startDtH the startDtH to set
*/
public void setStartDtH(String startDtH) {
startDtH = startDtH;
}
/**
* @return the startDtH
*/
public String getStartDtH() {
return startDtH;
}
/**
* @param startDtHMM the startDtHMM to set
*/
public void setStartDtHMM(String startDtHMM) {
this.startDtHMM = startDtHMM;
}
/**
* @return the startDtHMM
*/
public String getStartDtHMM() {
return startDtHMM;
}
/**
* @param startDtHDD the startDtHDD to set
*/
public void setStartDtHDD(String startDtHDD) {
this.startDtHDD = startDtHDD;
}
/**
* @return the startDtHDD
*/
public String getStartDtHDD() {
return startDtHDD;
}
/**
* @param startDtHYYYY the startDtHYYYY to set
*/
public void setStartDtHYYYY(String startDtHYYYY) {
this.startDtHYYYY = startDtHYYYY;
}
/**
* @return the startDtHYYYY
*/
public String getStartDtHYYYY() {
return startDtHYYYY;
}
}
最后，这是生成的html。
<script>
$(function() {
$( ".datePick").datepicker({
dateFormat: 'mm/dd/yy',
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText,inst)
{
id=$(this).attr('id');
pos = id.indexOf("(") + 1;
counter = id.slice(pos, -1);
id=id.replace("("+counter+")","");
pieces = dateText.split("/");
$("#"+ id+"MM("+counter+")").val(pieces[0]);
$("#"+ id+"DD("+counter+")").val(pieces[1]);
$("#"+id +"YYYY("+counter+")").val(pieces[2]);
}
});
});
</script>
<tr>
<td align="right" colspan="1">
<label for="setOfObjectsStartMMDtH("+counter+")"><label class="normal">Set of Objects</label></label>
</td>
<td align="left" colspan="4">
<input type="text" name="setOfObjectsStartDtHMM(0)" maxlength="2" size="2" value="" id="setOfObjectsStartDtHMM(0)"> /
<input type="text" name="setOfObjectsStartDtHDD(0)" maxlength="2" size="2" value="" id="setOfObjectsStartDtHDD(0)"> /
<input type="text" name="setOfObjectsStartDtHYYYY(0)" maxlength="4" size="4" value="" id="setOfObjectsStartDtHYYYY(0)">
<input type="hidden" name="setOfObjectsStartDtH(0)" value="" class="datePick" id="setOfObjectsStartDtH(0)">
（（注意：我知道'“+ counter +”'没有创建合适的标签 - 但修复此问题并未修复日历功能））
日历本身弹出没有问题，但是当我选择日期时，页面跳转到顶部，并且未填充日期字段 - 页面上的任何位置都不会显示错误消息，并且日历也不会消失，通常在选择日期后。
什么会导致日历显示为jQuery datepicker，但不允许我分配日历值？
答案 0 :(得分：1)
我认为问题是id选择器的连接。你需要转义括号。
试试这个：
$("#"+ id+"MM\\("+counter+"\\)").val(pieces[0]);
$("#"+ id+"DD\\("+counter+"\\)").val(pieces[1]);
$("#"+id +"YYYY\\("+counter+"\\)").val(pieces[2]);
答案 1 :(得分：1)
首先，您有两个概念后端代码（Java）和客户端代码（JavaScript）。通常，在Web应用程序中，当用户发出命中服务器的请求时，运行后端代码生成响应并将其发回 - 该响应采用HTML / JS / CSS形式，用于显示事物在浏览器中。进入浏览器后，可以执行JavaScript代码以提供进一步的功能。
这是针对大多数Web应用程序的基本思想 - Java可以替换为PHP或C＃或JavaScript（以NodeJS的形式）或许多其他作为后端，但您总是会在不同的时间执行，环境，甚至是机器以及地理位置。
据说，两者都可以沟通。不是直接的，例如，你不能从客户端调用MyServerObject.setMyValue()，但是如果你想从前端转移到后端，基本上有两种方法可以做到：
<form>，其中包含一组可以操作的<input>，并且在提交表单时，它会将所有值传输到后端。这取决于您希望如何获取数据，但在表单上归结为the action attribute。这会导致页面作为提交的一部分重新加载，并且用户被重定向到其他地方（但可能重定向到同一页面）。它被认为是侵入性的，而不是用户友好的，因此它的老旧和它的性质。另一方面，HTML本身支持它，任何浏览器都知道如何处理表单，因此它有其用途。虽然有很多方法可以实现AJAX，但jQuery .ajax()及其两个简写.get()和.post()非常方便。您可能要做的是在onSelect处理程序中调用类似于：
$.post("some/path/on/my/server", myData)其中myData对象将是您希望将作为JSON发送的数据，而some/path/on/my/server是可以接受该数据的服务器的某些部分。一般来说，这条路径最终会调用一些服务器端代码传递数据 - 在过去的日子里，你很可能只是用Perl编写的CGI脚本或其他东西，但现在它只是你的后端通过URI。究竟是如何实现的路径可能会有所不同，不幸的是，我不熟悉Struts如何在那里完成它，但我想它一定不会很难。
无论如何，一旦你的后端收到数据，通常要做的是以某种方式处理它（检查有效性，消毒，决定做什么），然后将其交给其他部分进行进一步处理。应用。在您的情况下，您可能会收到一些数据，然后创建并填充一些带有日期的对象，然后......做任何其他需要的事情。但是，如果您需要知道哪个用户已发出请求，并且该用户正在使用其日历执行操作，则可能需要包含更多信息。许多服务器端语言都具有会话的概念，这只是特定用户的上下文。如果某人修改了日历，您可以根据会话找出它是谁，并找到相应的日历。可能会为您设置会话，您可能无需使用它们。尽管如此，使用会话的另一种方法是为用户传递令牌 - 这需要某种形式的信息 - 用户名，密钥，会话ID，可以作为AJAX请求的一部分进行传输，并确定谁发布了它。
无论如何，如果您需要将信息传递回客户，例如＆＃34;行动成功＆＃34;或者＆＃34;失败＆＃34;然后后端可以或多或少地以两种方式响应AJAX请求。一种方法是从最简单的boolean发回一些数据，以指示成功/失败传回字符串或整个对象（可能被序列化并转移到JSON中）以指示响应。第二种方法是发送response code来表示发生了什么。实际上，您可能会混合使用两者。在客户端，这将通过使用jQuery处理程序
$.post("some/path/on/my/server", myData)
.done(function() { alert("sending data succeeded") })
.fail(function() { alert("sending data failed") })
.always(function() { alert("finished sending data") })
这是使用jQuery promises，另一种方法是将成功/失败处理程序指定为$.ajax调用的一部分。值得注意的是alert纯粹是为了说明目的 - 您可能会以不同的方式通知用户。或者根本不可能，因为它可能不相关，只要它有效，所以你可能只会在它失败时通知它们。