#4430 closed bug (wontfix)
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 TransitionalEN"> <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:
- Click the input field, the DatePicker shows
- Click on the page area to hide the DatePicker
- Click the "refresh content" button
- 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
bodyyou 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 ofbodybut only the parts you need to.