Hello,
I am actually running into the same problem, but I don't think the issue is browser-specific. I have the problem on both IE8 and Firefox.
There is a really simple way to reproduce the error:
add 3
buttons, 3
radajaxpanels, and a
label in each panel so that you can see which one is showing up (IE, write "panel 1", "panel 2", "panel 3" on the labels of each respective panel.)
Make the panels invisible, and on the click event of each button, make it show a certain panel and hide the others.
Then just wire up the ajax so that each button effects every panel.
For added effect, add a radajaxloadingpanel and set it's minimum display time to 5000.
So, for example:
<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadControlsWebApp1._Default" %>
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Button1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" UpdatePanelHeight="" />
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel2" UpdatePanelHeight="" />
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel3" UpdatePanelHeight="" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Button2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" UpdatePanelHeight="" />
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel2" UpdatePanelHeight="" />
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel3" UpdatePanelHeight="" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Button3">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" UpdatePanelHeight="" />
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel2" UpdatePanelHeight="" />
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel3" UpdatePanelHeight="" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Button ID="Button3" runat="server" Text="Button" />
<br />
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
MinDisplayTime="5000" Skin="Forest">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Visible="False">
<asp:Label ID="Label2" runat="server" Text="Panel 2"></asp:Label>
</telerik:RadAjaxPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" Visible="False">
<asp:Label ID="Label3" runat="server" Text="Panel 3"></asp:Label>
</telerik:RadAjaxPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Panel 1"></asp:Label>
</telerik:RadAjaxPanel>
</div>
</form>
</body>
</html>
The problem: When you click through the buttons on the page, button1 clearly calls the ajax appropriately and the loading bar correctly waits for 5 seconds. When you click the other buttons, however, the ajax call doesn't get made. For some reason, it looks like it posts back as though there were no ajax. The loading gif doesn't show at all. If you use firebug in firefox, you can actually see that the requests being made are different.
I need the ajax to support more than one button. Why does only the first button work? What do we do?