Search and Top Navigation
#4430 closed bug (wontfix)
Opened April 03, 2009 07:52AM UTC
Closed April 07, 2009 06:26AM UTC
Last modified October 11, 2012 09:15PM UTC
Crash with DatePicker and dynamic content
Reported by: | voxen | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | |
Component: | ui.datepicker | Version: | 1.7.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
When a DatePicker is attached to a javascript generated input field (or content loaded with Ajax), 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 "-W3CDTD 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)
By completely replacing the content of
body
you are destroying the popup datepicker division that is created when the plugin is loaded. Since this is not re-created when you reload the body, the datepicker cannot function any more. The solution is to not replace all ofbody
but only the parts you need to.