Crash with DatePicker and dynamic content
Hi,
When a DatePicker is attached to a javascript generated input field,
the DatePicker crashes when the user click on the input field the 2nd
time after reloading the content.
Here is a sample code to reproduce (explanation follow):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.js"></
script>
<script type="text/javascript">
$(function()
{
refresh(false);
});
function refresh(destroy)
{
if (destroy)
$("#datepicker").datepicker('destroy');
$('body').html('<input type="text" id="datepicker"><br /><a
href="javascript:refresh(true)">refresh content</a>');
$("#datepicker").datepicker();
}
</script>
</head>
<body>
</body>
</html>
To reproduce the crash:
1. Click the input field, the DatePicker shows
2. Click on the page area to hide the DatePicker
3. Click the "refresh content" button
4. Click the input field again, the DatePicker crashes with an
exception thrown:
Uncaught Error: INVALID_NODE_TYPE_ERR: DOM Range Exception 2
in jquery-1.3.2.js (line 2118)
This sample code simply shows the problem I have with DatePicker bound
to dynamic form fields loaded with Ajax.