update panel not displaying in firefox

6 posts, 0 answers
  1. kyle goodfriend
    kyle goodfriend avatar
    53 posts
    Member since:
    Mar 2007

    Posted 28 Sep 2010 Link to this post

    I have created a very simple page with a button and the ajax compnents.  When I click the button, the update panel doesn't display in firefox but it does in IE.  I took this from one of the examples.  Is there something unique to Firefox?  The example works on the demo page, but when I remove the content code and place it on my page, it doesn't.

    Thanks
    <%@ Page Language="VB" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script runat="server">
     
        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
            'simulate longer page load
            System.Threading.Thread.Sleep(2000)
        End Sub
        Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
            RadAjaxLoadingPanel1.EnableSkinTransparency = (TryCast(sender, CheckBox)).Checked
        End Sub
        Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim position As New AjaxLoadingPanelBackgroundPosition()
            If DropDownList1.SelectedValue = "Bottom" Then
                position = AjaxLoadingPanelBackgroundPosition.Bottom
            End If
            If DropDownList1.SelectedValue = "BottomLeft" Then
                position = AjaxLoadingPanelBackgroundPosition.BottomLeft
            End If
            If DropDownList1.SelectedValue = "BottomRight" Then
                position = AjaxLoadingPanelBackgroundPosition.BottomRight
            End If
            If DropDownList1.SelectedValue = "Center" Then
                position = AjaxLoadingPanelBackgroundPosition.Center
            End If
            If DropDownList1.SelectedValue = "Left" Then
                position = AjaxLoadingPanelBackgroundPosition.Left
            End If
            If DropDownList1.SelectedValue = "None" Then
                position = AjaxLoadingPanelBackgroundPosition.None
            End If
            If DropDownList1.SelectedValue = "Right" Then
                position = AjaxLoadingPanelBackgroundPosition.Right
            End If
            If DropDownList1.SelectedValue = "Top" Then
                position = AjaxLoadingPanelBackgroundPosition.Top
            End If
            If DropDownList1.SelectedValue = "TopLeft" Then
                position = AjaxLoadingPanelBackgroundPosition.TopLeft
            End If
            If DropDownList1.SelectedValue = "TopRight" Then
                position = AjaxLoadingPanelBackgroundPosition.TopRight
            End If
            RadAjaxLoadingPanel1.BackgroundPosition = position
        End Sub
    </script>
     
    <head runat="server">
        <title></title>
        <style type="text/css">
            .style1
            {
                width: 212px;
                height: 65px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="CheckBox1">
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="DropDownList1">
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1"
                            LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div class="bigModule">
            <div class="bigModuleBottom">
                <p>
                    <b>RadAjaxLoadingPanel</b> supports skinning and you can change its skin by setting
                    the <b>Skin</b> property to the name of the respective skin. A <b>BackgroundPosition</b>
                    property enables you to position the loading image in the loading panel. The <b>EnableSkinTransparency</b>
                    property allows you to enable/disable default skin transparency.</p>
                <p>
                    Please note that the loading images that are currently embedded in the Telerik.Web.UI
                    assembly will not be available after Q1 2009.
                </p>
                <br />
            </div>
        </div>
     
            <table>
                <tr>
                    <td style="width: 200px">
    <asp:CheckBox ID="CheckBox1" runat="server" Text="EnableSkinTransparency" Checked="true"
    AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" /><br />
                        <br />
                    </td>
                    <td>
                        Change Background Position:<br />
                        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem>Bottom</asp:ListItem>
                            <asp:ListItem>BottomLeft</asp:ListItem>
                            <asp:ListItem>BottomRight</asp:ListItem>
                            <asp:ListItem Selected="True">Center</asp:ListItem>
                            <asp:ListItem>Left</asp:ListItem>
                            <asp:ListItem>None</asp:ListItem>
                            <asp:ListItem>Right</asp:ListItem>
                            <asp:ListItem>Top</asp:ListItem>
                            <asp:ListItem>TopLeft</asp:ListItem>
                            <asp:ListItem>TopRight</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>
     
        <fieldset class="module1">
            <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center" Height="275px">
    <asp:Button ID="Button1" runat="server" Text="Click to see the loading image" OnClick="Button1_Click"
    Style="margin-top: 15px; margin-left: 15px" CssClass="qsfButtonBigger" />
            </asp:Panel>
        </fieldset>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    adfadsfadsfasdfadsfadfas
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 28 Sep 2010 Link to this post

    Hello Kyle,

    Remove the text content from the RadAjaxLoadingPanel control and see if that works.
  3. kyle goodfriend
    kyle goodfriend avatar
    53 posts
    Member since:
    Mar 2007

    Posted 28 Sep 2010 Link to this post

    No change.  I tried creating one one my own first, fyi.  It didn't work, which is when I copied from the demo page.  Could you supply a simple example? I did this real quick.  It works in IE, not FireFox.

    <%@ Page Language="VB" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script runat="server">
     
    </script>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="Button1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Button1"
                                LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>  
        </div>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px"
            width="300px">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
            MinDisplayTime="1000" Skin="Default">
            Test
        </telerik:RadAjaxLoadingPanel>
        </form>
    </body>
    </html>
  4. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 28 Sep 2010 Link to this post

    In your RadAjaxLoadingPanel, you should remove Test from it. It should look like this:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
            MinDisplayTime="1000" Skin="Default">
    </telerik:RadAjaxLoadingPanel>

    See if that works. If it does, then it means you can't add text inside the RadAjaxLoadingPanel control.

    I hope that helps.
  5. kyle goodfriend
    kyle goodfriend avatar
    53 posts
    Member since:
    Mar 2007

    Posted 28 Sep 2010 Link to this post

    Doesn't work.  I have tried that, tried adding a gif, tried setting the skin...nothing works in FireFox, but everything works in IE.  There has to be something very basic I am missing.
  6. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 29 Sep 2010 Link to this post

    Remove your button from inside the RadAjaxPanel. You're not supposed to have RadAjaxPanel and RadAjaxManager on the same page.

    See if that helps.
Back to Top