This is a migrated thread and some comments may be shown as answers.

Button Click Problem in Firefox

3 Answers 134 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 30 Oct 2010, 07:45 PM

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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click

RadAjaxPanel1.Visible = True

RadAjaxPanel2.Visible = False

RadAjaxPanel3.Visible = False

End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click

RadAjaxPanel1.Visible = False

RadAjaxPanel2.Visible = True

RadAjaxPanel3.Visible = False

End Sub

Protected Sub Button3_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button3.Click

RadAjaxPanel1.Visible = False

RadAjaxPanel2.Visible = False

RadAjaxPanel3.Visible = True

End Sub

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?