Когда я выполняю ajax-вызов jquery для автоматического заполнения раскрывающегося списка при загрузке страницы, раскрывающийся элемент управления отключается содержащейся таблицей. Я понимаю, что если установить ширину таблицы на 100%, это исправит это, но в моем случае я не могу этого сделать. Этот код отлично работает в FF. Похоже, что IE не будет «перерисовывать» страницу после завершения вызова ajax. Вот код -
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>
<select>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="mySelect">
</select>
</td>
</tr>
</table>
<script type="text/javascript">
var mySelect = $( "#mySelect" );
fillListCombo = function( json )
{
if ( json )
{
mySelect.empty();
$( json ).each( function( i, obj )
{
var option = $( "<option></option>" );
option.val( obj.id );
option.text( obj.text );
option.appendTo( mySelect );
} );
}
else
{
mySelect.find( 'option' ).remove().end().append( '<option value="0">(none available)</option>' ).val( '0' );
}
}
updateListCombo = function()
{
$.ajax(
{
type: "GET", url: "http://localhost/Ajax/ListLookupPage.aspx", dataType: "json", data:
{
listkindid: "1", userid: "17"
},
timeout: 2000, success: function( opts )
{
fillListCombo( opts );
},
error: function( xhr, status )
{
mySelect.find( 'option' ).remove().end().append( '<option value="0">(none selected)</option>' ).val( '0' );
}
} );
};
updateListCombo();
</script>
</body>
</html>
Хотелось бы, чтобы у меня была общедоступная страница Ajax, которую я мог бы предоставить, чтобы ее можно было скопировать и вставить в текстовый редактор, чтобы попробовать самостоятельно, но я этого не делаю.
Как это выглядит в Firefox:
Как это выглядит в IE7 / 8:
Любые идеи о том, как заставить IE 7/8 правильно отображаться после завершения обратного вызова ajax?
Спасибо.