DatePicker stops working after a body replacement
Wow, if that sounded tragic it's due to some badass legacy script I'm
dealing with.
Before you tell me that I shouldn't be updating the document's body
like this, let me tell you that I completely agree with you.
Unfortunately this way of updating the page is part of a legacy ajax
implementation that I'm still fighting to get replaced (I could go on
and on about why I can't change that so please just trust me :) )
This is an IE-only site (blergh, I know) but the issue is interesting.
I was able to create a small repro:
(save this as repro.html and open in IE. IE8 is what I'm using)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>DP issue</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.js"></
script>
</head>
<body>
<script>
var loadTime = new Date().toString();
function loadIframe(){
$('#myIFrame').attr('src', 'repro.html?d=' + (new Date().getTime
()) );
}
function replaceBody(){
var html = $('#myIFrame').contents().find('body').html();
$('body').empty().html( html );
// (1) ---- can't change code above this line ---
//tried with and without this next line, no diff.
stuffOnLoad();
}
</script>
Here's a datepicker <input type=text id="mydp" >
Here's an iframe (it's not visible in the real app)
<iframe id="myIFrame" width="500" height="50%" style="border:solid
2px red;"></iframe>
<hr>
Click each button in sequence (remember, only in IE)
<input type="button" value="1 - Load IFRAME" onclick="loadIframe();" /