The HTML and script for the form above is:
<form method="get" action="#">
When the page is freshly loaded, click here:
<button onclick="updateList(); return false;">Run Test</button>
<br/><br/>
This list should fill up with new content:
<select id="TargetListID">
<option value="3" selected="selected">First</option>
<option value="4">Second</option>
</select>
<br/><br/>
This fails in IE.
<script type="text/javascript">
//<![CDATA[
function updateList(element, value) {
new Ajax.Updater(
'TargetListID',
'newdata.html',
{
method:'get',
asynchronous:true,
evalScripts:true,
requestHeaders:['X-Update', 'TargetListID']
}
)
}
//]]>
</script>
</form>
The complete contents of newdata.html (the page requested via AJAX) are:
<option value="1" selected="selected">Success! First</option>
<option value="2">Success! Second</option>
What IE reports (via DebugBar 5.0.2) for the contents of the updated list is this:
Success! First</option>
<option value="2">Success! Second</option>
The opening <option value="1" selected="selected"> tag is missing so none of the list renders.