代码之家 › 专栏 › 技术社区 › Craig

Internet Explorer在调用Ajax后不展开表

rendering internet-explorer ajax jquery

Craig · 技术社区 · 16 年前

当我调用jquery ajax来自动填充页面加载的下拉列表时,下拉控件被包含表切断。我知道如果把桌子宽度设为100%,它可以解决这个问题,但在我的情况下,我不能这样做。此代码在FF中工作正常。这几乎就像在Ajax调用完成后IE不会“重新呈现”页面。这是密码--

<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中的出现方式:
alt text http://i39.tinypic.com/20sfuc3.jpg
IE7/8中的显示方式:
alt text http://i40.tinypic.com/24511rl.jpg

关于如何在Ajax回调完成后强制IE7/8正确呈现有什么想法吗?

谢谢。

1 回复 | 直到 16 年前

user113716 16 年前

有点黑客,但如果您更改了select的不需要的css属性,它将强制更新。

$('#mySelect').css({margin: '0'}).append('<option value="0">(none available)</option>');

(您的示例被截断,但原理应该相同。)

我只在XP上用IE7测试过这个。

推荐文章

Shishir Karki · 在react(typescript)项目上未渲染图像

1 年前

Aresta · 使用某些库在PDF上显示PNG印章时出现问题

2 年前

german devia · 光标进入图像时闪烁的图像

2 年前

Hannan Yusuf Khan · 无法呈现,REACT

2 年前

Kay · 更新React状态(对象数组)和组件转发器,但在另一个状态更新之前,显示不会更改

2 年前

Urooj · 具有async属性的脚本是在单独的线程上执行,还是在与JavaScript中的HTML解析器相同的线程上运行?

2 年前

Reinhard Männer · 不理解SwiftUI文本布局

2 年前

laith drebaty · 如何在我的django后端获得一个反应页面以通过邮件发送

2 年前

nona · Pyrender中的世界到像素转换

2 年前

user22192981 · 如何使用像素阵列在Java中读取和渲染字体?

2 年前