I'm attempting to use the jQuery datepicker function to populate date fields that are part of an object set in a hashmap.
We're using STRUTS 1 to map our form data - and for most of our data, this is sufficient.
I've already checked and written these fields out previously so that they can be populated by manually entering the date, now I want to add the jQuery datepicker to allow the user to select a date from a pop-up calendar. I'm using Chrome. Code snippet below.
<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>
Here is what my getters and setters look like.
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;
}
And here's what the SetOfObjects looks like:
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;
}
}
And finally, here's the generated 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)">
((Note: I am aware that the '"+counter+"' is not creating an appropriate label - but fixing this has not fixed the calendar function))
The calendar itself pops up with no problem, but when I select a date, the page jumps to the top, and the date fields are not populated - no error message appears anywhere on the page, and the calendar does not disappear either, as it usually would after selecting a date.
What would cause the calendar to appear for the jQuery datepicker, but not allow me to assign the calendar values?
I think the problem is concatenation of the id selectors. You need to escape the parenthesis.
Try this:
$("#"+ id+"MM\\("+counter+"\\)").val(pieces[0]);
$("#"+ id+"DD\\("+counter+"\\)").val(pieces[1]);
$("#"+id +"YYYY\\("+counter+"\\)").val(pieces[2]);