asp.net - IE9でajaxポストバック後にjQueryモバイル要素が非表示になる

Question

最初の背景: ASP.NET Web フォーム + jQuery 1.6.4 + jQuery Mobile 1.1.0 + Telerik RadAjaxManager を使用する Web サイトがあります。

いくつかのページには、autopostback="true" の asp ドロップダウンリストがあり、ページ上の他のコントロールを更新するために RadAjaxManager に登録されています。

すべてが、Firefox (最新バージョン)、IE7、IE8、IE10、Chrome (最新バージョン)、および私の Samsung Galaxy Nexus で意図したとおりに機能します。

問題：

ドロップダウンリストのajaxポストバック後に物が消える

一見ランダムに、ドロップダウンリストで選択した項目 (上記のように autopostback=true の項目) を変更した後に AJAX 応答が戻ってくると、ページの一部 (他のドロップダウンリスト、ボタン、ヘッダーセクション - 必ずしもこの AJAX 要求に関係するわけではありません)まったく）単に消えます。消えるとは、開発者ツールを使用して表示すると DOM に残っているが、ページには表示されないということです。ブラウザウィンドウのサイズを変更したり、ページの一部をカーソルで選択したりすると、要素が再表示されるため、それらはまだそこにあります。

2 つのスクリーンショットをアップロードしてみました。

ページが初めてロードされた後に取得
ドロップダウンリストを変更した後に撮影

しかし、私はまだ十分なポイントを持っていません. これは私がそれらについて言うつもりだったことです:

両方のスクリーンショットで「サイト」が同じであることがわかります。これは、アイテムが消える前に、選択したアイテムを数回変更する必要があったためです。これが、この問題のデバッグに問題がある理由の 1 つです。正常に動作する場合とそうでない場合があります (ドロップダウンリストの約 3 回に 1 回の変更で、項目が消えます)。

この問題を引き起こしている可能性のあるアイデアはありますか?

私がこれまでに試したこと：

さまざまなメタタグとドキュメントタイプ
互換モードの有無にかかわらず試してみました
jQuery Mobile css を削除するとすべてが見苦しくなりますが、すべての AJAX は期待どおりに機能し、要素が消えることはありません。
ドロップダウンリストをパネルにラップし、代わりに RadAjaxManager にパネルを登録する
$(".ui-page").trigger("create"); の組み合わせを使用してみました。および $(".ui-page").trigger("refresh"); ページ上のさまざまな要素で
必死になって、ページのすべてを表にまとめてみました
キャッシュをクリアしました
$(".ui-page").trigger("create"); に JavaScript 遅延を追加しました。
望み、祈り、オフィスを駆け回ったが、何も解決せず、アイデアがなくなった

この問題を再現するために必要な最小限のコードを含むサンプルプロジェクトを作成してみますが、それまでの間、何らかの方法で私を導くのに十分な情報を提供できたことを願っています。

アップデート：

サンプルプロジェクトをまとめようとしてさらにテストを行った後、自分のページの RadAjaxLoadingPanel に絞り込みました。使用しないと、すべてが期待どおりに機能します。

別の更新:

この問題を再現するために必要な最小限のコードを含むサンプルアプリケーションを用意しました。重要なコードは、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を引き続き使用するために何ができるのか、正しく動作させることができるのか教えてもらえますか?

score 1 · Accepted Answer

RadAjaxLoadingPanel をまだ使用しているときにこれを行う方法を見つけたことはありませんでしたが、今後もそうなるとは思いません。したがって、私はこの質問に自分自身で答えます。この問題が発生している場合は、RadAjaxLoadingPanel を使用しないでください。

asp.net - IE9でajaxポストバック後にjQueryモバイル要素が非表示になる

1 に答える 1

Related

Reference