Image not showing on dynamically generated Datepicker
I have an app where I'm creating deadlines, which can be either text or dates, so I have a hidden datepicker with the image, then capture that and save it to a text field. Everything works except when I create a new field on the fly. At that point, the image never shows up. I've tried using the datepicker("refresh") method and it still doesn't work. What am I missing and/or what do I need to do to get this to run?
Pertinent code is: (NOTE: Body is XSLT)
$(".addDeadline").click(function(evt) {
var newDeadlineCount = $("#newDeadlineCount").val() + 1;
var addHtml;
var deadlineTypes = [ '', 'Confirmed', 'Anticipated'];
<![CDATA[
addHtml = '<tr class="deadline">';
addHtml += '<td valign="top"><img class="deleteDeadline" src="/leo_images/delete.png" title="Delete"/></td>';
addHtml += '<td><input type="text" name="deadline_new_';
addHtml += newDeadlineCount;
addHtml += '" class="deadlineDate"/><input type="hidden" class="deadlineDatePicker"/></td>';
addHtml += '<td><select name="deadlineType_new_';
addHtml += newDeadlineCount;
addHtml += '">';
for (var i in deadlineTypes) {
addHtml += '<option value="';
addHtml += deadlineTypes[i];
addHtml += '">';
addHtml += deadlineTypes[i];
addHtml += '</option>';
}
addHtml += '</select></td></tr>';
]]>
var addDeadline = $(" #trAddDeadline ").detach();
$(".deadlines").append(addHtml);
addDeadline.appendTo(".deadlines");
$(".deadlineDatePicker").datepicker("refresh");
});
$( ".deadlineDatePicker" ).datepicker({
showOn: "button",
buttonImage: "/leo_images/calendar.png",
buttonImageOnly: true,
dateFormat: "dd M yy",
});
<body>
<tr class="deadline">
<td valign="top"><img class="deleteDeadline" src="/leo_images/delete.png" title="Delete"/></td>
<td><input type="text" name="deadline_{@id}" class="deadlineDate" value="{@text}"/><input type="hidden" class="deadlineDatePicker" value="{@text}"/></td>
<td><select name="deadlineType_{@id}">
<xsl:variable name="currDeadlineType"><xsl:value-of select="@type"/></xsl:variable>
<xsl:for-each select="../deadline_type">
<xsl:choose>
<xsl:when test="@type=$currDeadlineType">
<option value="{@type}" selected="selected"><xsl:value-of select="@type"/></option>
</xsl:when>
<xsl:otherwise>
<option value="{@type}"><xsl:value-of select="@type"/></option>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</select></td>
</tr>
</body>