2

首先是一些背景知识： 我有一个使用 ASP.NET Web 表单 + jQuery 1.6.4 + jQuery Mobile 1.1.0 + Telerik RadAjaxManager 的网站。

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

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

问题：

下拉列表ajax回发后事情消失了

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

我尝试上传2个屏幕截图：

  1. 在页面第一次加载后拍摄
  2. 更改下拉列表后拍摄

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

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

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

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

  1. 不同的元标记和文档类型
  2. 尝试使用和不使用兼容模式
  3. 删除 jQuery Mobile css 让一切看起来很丑陋，但所有 AJAX 都按预期工作，没有消失的元素
  4. 将下拉列表包装在面板中并使用 RadAjaxManager 注册面板
  5. 尝试使用组合 $(".ui-page").trigger("create"); 和 $(".ui-page").trigger("refresh"); 页面上有不同的元素
  6. 我绝望了，试着把页面上的所有东西都放在一张桌子上
  7. 我已经清除了缓存
  8. 为 $(".ui-page").trigger("create"); 添加了 javascript 延迟
  9. 希望，祈祷并在办公室周围冲撞，但没有任何解决办法，我没有想法

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

更新：

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

另一个更新：

我现在有一个示例应用程序，其中包含重现此问题所需的最少代码。关键代码是添加 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 但让它正常工作吗？

4

1 回答 1

1

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

于 2012-08-16T06:42:51.797 回答