在 IE9 中 ajax 回发后隐藏的 jQuery 移动元素答案

【问题标题】：jQuery mobile elements hidden after ajax postback in IE9在 IE9 中 ajax 回发后隐藏的 jQuery 移动元素
【发布时间】：2012-07-06 13:50:04
【问题描述】：

先介绍一下背景： 我有一个使用 ASP.NET 网络表单 + jQuery 1.6.4 + jQuery Mobile 1.1.0 + Telerik RadAjaxManager 的网站。

在几个页面上，我有一个带有 autopostback="true" 的 asp 下拉列表，它们在 RadAjaxManager 中注册以更新页面上的其他一些控件。

在 Firefox（最新版本）、IE7、IE8、IE10、Chrome（最新版本）和我的三星 Galaxy Nexus 上一切正常。

问题：

dropdownlist ajax 回发后东西消失了

似乎是随机的，当 AJAX 响应在更改下拉列表中的选定项目（如上面提到的 autopostback=true 的项目）后返回时，我的页面部分（其他下拉列表、按钮和标题部分 - 不一定涉及这个 AJAX 请求）就消失了。我所说的消失的意思是，当我使用开发人员工具查看它时它们仍在 DOM 中，但它们在页面上是不可见的。它们仍然存在，因为如果我重新调整浏览器窗口的大小或用光标选择页面中元素应该位于的部分，它们就会重新出现。

我尝试上传 2 张截图：

在页面首次加载后拍摄
在更改下拉列表后拍摄

但我还没有足够的积分...这就是我要对他们说的：

您会注意到两个屏幕截图中的“站点”是相同的，这是因为我必须多次更改所选项目，然后才会消失。这是我无法调试此问题的原因之一；有时它可以正常工作，有时则不能（大约三分之一的下拉列表更改会导致内容消失）。

任何想法可能导致此问题？

到目前为止我尝试过的事情：

不同的元标记和文档类型
尝试使用和不使用兼容模式
删除 jQuery Mobile css 会使一切看起来很丑陋，但所有 AJAX 都按预期工作，没有元素消失
将下拉列表包装在面板中，然后使用 RadAjaxManager 注册面板
尝试使用组合 $(".ui-page").trigger("create");和 $(".ui-page").trigger("refresh");页面上有不同的元素
我绝望了，尝试将页面上的所有内容都包装在一个表格中
我已清除缓存
为 $(".ui-page").trigger("create"); 添加了 javascript 延迟
希望，祈祷和冲撞办公室，但没有任何解决办法，我没有想法

我将尝试创建一个示例项目，该项目具有重现此问题所需的最少代码量，但同时我希望我已经提供了足够的信息，以便您以某种方式指导我。

更新：

在尝试将示例项目放在一起进行更多测试后，我已将其缩小到我页面上的 RadAjaxLoadingPanel - 当我使用它时（例如在 RadAjaxManager 中设置 LoadingPanelID="myLoadingPanel" 或将其设置为我的 DefaultLoadingPanelID RadAjaxManager) 东西消失了，当我不使用它时，一切都按预期工作。

另一个更新：

我现在有一个示例应用程序，其中包含重现此问题所需的最少代码。关键代码是添加 RadAjaxLoadingPanel - 没有它，代码可以正常工作。记得在 IE9 中测试，因为所有其他浏览器都可以。

在 Visual Studio 中创建一个新的空 Web 应用程序并添加一个新的 Web 表单。前端代码应该是这样的：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="utf-8" />
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    <script type="text/javascript">
        //handle the end of AJAX requests
        function responseEnd(sender, eventArgs) {
            //need to tell jquery mobile to initialise the new content
            $(".ui-page").trigger("create");
        }
    </script>
</head>
<body>
<div data-role="page">
    <form id="form1" runat="server" enctype="multipart/form-data">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnResponseEnd="responseEnd">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ddl1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ddl2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>

        <div id="header" data-role="header">
            <h1>Header</h1>
        </div><!-- /header -->

        <label>Ajax drop down:</label>
        <asp:DropDownList ID="ddl1" runat="server"
            AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged">
            <asp:ListItem>Select...</asp:ListItem>
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
        </asp:DropDownList>
        <br />

        <label>updated drop down:</label>
        <asp:DropDownList ID="ddl2" runat="server">
            <asp:ListItem>Select...</asp:ListItem>
        </asp:DropDownList>
        <br />
    </form>
</div>
</body>
</html>

后面的代码就是这样：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddl2.Items.Clear();
            ddl2.Items.Add("A");
            ddl2.Items.Add("B");
            ddl2.Items.Add("C");
            ddl2.SelectedValue = "A";
        }
    }
}

如果您在 IE9 中运行它并更改第一个下拉列表的选定值，您会看到标题消失。然后重新调整浏览器窗口的大小或用光标选择它，它将再次显示。

那么，谁能告诉我为什么会发生这种情况以及我可以做些什么来仍然使用 RadAjaxLoadingPanel 但让它正常工作？

【问题讨论】：

标签： asp.net jquery-mobile asp.net-ajax telerik internet-explorer-9

【解决方案1】：

在仍然使用 RadAjaxLoadingPanel 时，我从来没有知道如何做到这一点，但我想我永远不会。因此，我将自己回答这个问题：如果您遇到此问题，请不要使用 RadAjaxLoadingPanel。

【讨论】：