jQuery移動元素在IE9後Ajax回發隱藏

首先一些背景： 我有一個網站使用ASP.NET Web窗體+ jQuery 1.6.4 + jQuery Mobile 1.1.0 + Telerik RadAjaxManager。jQuery移動元素在IE9後Ajax回發隱藏

在幾頁上我有一個autopostback =「true」的asp dropdownlist，並且它們在RadAjaxManager中註冊以更新頁面上的一些其他控件。

所有功能與Firefox（最新版本），IE7，IE8，IE10，Chrome（最新版本）和我的三星Galaxy Nexus一樣。

問題：

事情下拉列表AJAX回傳後消失

看似隨意，當AJAX響應改變所選擇的項目在下拉列表（帶有自動回後回來=真如上所述），我的頁面部分（其他下拉列表，按鈕和標題部分 - 根本不需要參與此AJAX請求）簡單地消失。我的意思是消失的是，當我使用開發人員工具查看它們時，它們仍然在DOM中，但它們在頁面上不可見。他們仍然存在，因爲如果我重新調整瀏覽器窗口的大小或者使用我的光標在頁面中選擇元素所在的位置，那麼它們會重新出現。

我試着上傳2個屏幕截圖：

頁之後採取

加載首次
改變下拉列表

後拍攝，但我沒有足夠的積分還沒有.. 。這就是我要說的：

你會注意到'網站'在兩個屏幕截圖中都是一樣的，那是因爲我必須改變所選項目a co事情消失之前有很多次。這是我在調試此問題時遇到問題的原因之一;有時它可以正常工作，有時它不會（大約1/3的下拉列表中的變化導致事情消失）。

任何想法可能會導致此問題？

事情我試過到目前爲止：

試圖與不兼容模式

去除jQuery Mobile的CSS葉一切面色難看，但所有

不同的元標記和文檔類型AJAX按預期工作，沒有消失的元素
將下拉列表包裝在面板中，並使用RadAjaxManager註冊面板代替
嘗試使用$（「。ui-page」）組合。trigger（「create」）;和$（「.ii-page」）。觸發器（「刷新」）;與頁面
我變得絕望，並試圖在一個表中
我已清除緩存
添加一個javascript延遲$（「UI頁」）包裝網頁上的所有不同的元素。觸發（「創建」）;
希望，祈禱和周圍的辦公室猛攻，但沒有修復它，我的想法

我會努力創建具有重現此問題所需的代碼量最小的樣本項目，但在同時我希望我已經提供了足夠的信息來指導我。

更新：

經過一些測試，同時試圖獲得一個樣本項目一起我已經把範圍縮小到RadAjaxLoadingPanel我的網頁上 - 在當我使用它（如設置LoadingPanelID =「myLoadingPanel」 RadAjaxManager或者將它設置爲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，但它能正常工作嗎？

來源

2012-07-06 Dean

優秀的第一個問題！有一點。 – 2012-07-06 23:30:24

我從來沒有找到如何做到這一點，同時仍然使用RadAjaxLoadingPanel，但我不認爲我會永遠。所以我會自己回答這個問題：如果你有這個問題，就不要使用RadAjaxLoadingPanel。

來源

2012-08-16 06:42:51 Dean

jQuery移動元素在IE9後Ajax回發隱藏

回答

相關問題