First some background:
I have a website using ASP.NET web forms + jQuery 1.6.4 + jQuery Mobile 1.1.0 + Telerik RadAjaxManager.
On a couple of the pages I have an asp dropdownlist with autopostback=”true” and they are registered with the RadAjaxManager to update some other controls on the page.
Everything works just as intended in Firefox (latest version), IE7, IE8, IE10, Chrome (latest version) and on my Samsung Galaxy Nexus.
The problem:
Things disappear after dropdownlist ajax postback
Seemingly at random, when the AJAX response comes back after changing the selected item in the dropdownlist (the one with autopostback=true as mentioned above), portions of my page (other dropdownlists, buttons and header section – not necessarily involved with this AJAX request at all) simply disappear. What I mean by disappear is they are still in the DOM when I view it using the developer tools but they are invisible on the page. They are there still because if I re-size the browser window or select the parts of the page with my cursor where the elements should be they then re-appear.
I tried uploading 2 screenshots:
- taken after page has loaded for the first time
- taken after changing the dropdownlist
But I don’t have enough points yet… This is what I was going to say about them:
You’ll notice the ‘Site’ is the same in both screen-shots, that’s because I had to change the selected item a couple of times before things disappeared. This is one of the reasons I’m having trouble debugging this issue; sometimes it works fine and sometimes it doesn’t (about 1 in 3 changes of the dropdownlist cause things to disappear).
Any ideas what might be causing this problem?
Things I’ve tried so far:
- different meta tags and doc types
- tried with and without compatibility mode
- removing the jQuery Mobile css leaves everything looking ugly but all AJAX work as expected with no disappearing elements
- wrapping the dropdownlists in a panel and registering the panel with the RadAjaxManager instead
- tried using combinations of $(“.ui-page”).trigger(“create”); and $(“.ui-page”).trigger(“refresh”); with different elements on the page
- I got desperate and tried wrapping everything on the page in a table
- I’ve cleared the cache
- Added a javascript delay to $(“.ui-page”).trigger(“create”);
- Hoped, prayed and stormed around the office but nothing fixes it and I’m out of ideas
I’ll try creating a sample project that has the minimum amount of code needed to reproduce this issue but in the meantime I hope I’ve given enough information for you to guide me in some way.
Update:
After some more testing while trying to get a sample project together I have narrowed it down to the RadAjaxLoadingPanel on my page – when I use it (eg set LoadingPanelID=”myLoadingPanel” in the RadAjaxManager OR set it as the DefaultLoadingPanelID on my RadAjaxManager) things disappear, when I don’t use it everything works as expected.
Another Update:
I’ve now have a sample application with the minimum code required to reproduce this issue. The crucial code is adding the RadAjaxLoadingPanel – without it the code works fine. Remember to test this in IE9 as all other browsers are fine.
Create a new empty web application in visual studio and add a new web form. The front end code should look like this:
<%@ 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>
The code behind is simply this:
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";
}
}
}
If you run it in IE9 and change the selected value of the first drop down list you’ll see the header disappear. Then re-size your browser window or select it with your cursor and it will display again.
So, can someone tell me why this is happening and what I can do to still use the RadAjaxLoadingPanel but have it work correctly?
I never did find out how to do this while still using the RadAjaxLoadingPanel but I don’t think I ever will. So I’m going to answer this question myself with this: just don’t use the RadAjaxLoadingPanel if you’re having this problem.