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

RadAjaxPanel crashing

16 Answers 155 Views

Ajax

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

16 Answers, 1 is accepted

answered on 11 Aug 2010, 03:43 PM

masterpage.zip

Hi khaled jendi,

I followed your scenario and prepared a simple runnable project that is working as expected. Please give it a try and let me know what is the difference in your case.

I hope this helps.

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 11 Aug 2010, 10:39 PM

can you please tell me where is my error in code (because I have done excatly as what you have done in your sample and I have downloaded the Q2 2010 version)....

here is code:

((note that HomeMenuTab link button updates the panel UserControlContent))

//aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="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">
   <link href="styles/ClientDetialsStyle.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="styles/client_page/dialog.css" media="screen" />
    <link rel="stylesheet" href="styles/client_page/example-variants.css" media="screen" />

    <title>Leamra Tech</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>

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="HomeMenuTab">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="UserControlContent" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
   </telerik:RadAjaxManager>

   <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="WebBlue">
   </telerik:RadSkinManager>

    <div id="main_content">
        <div style="margin-bottom: 60px;margin-left:12px;">
         <table border="0" cellpadding="0" cellspacing="0" >
            <tr>
                <td>
                    <div class="fadehover">

                        <asp:LinkButton ID="HomeMenuTab" runat="server" onclick="HomeMenuTab_Click"><img
                            src="images/client_page/home_white_normal.png" alt="Home" class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton2" runat="server"><img
                            src="images/client_page/home_white_hover.png" alt="Home" class="b" /> </asp:LinkButton>
                    </div>
                </td>
                <td >
                    <div class="fadehover" style="left:155px">
                        <asp:LinkButton ID="ProfileMenuTab" runat="server"><img
                            src="images/client_page/profile_white_normal.png" alt="Ptofile" class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton4" runat="server"><img
                            src="images/client_page/profile_white_hoverl.png" alt="Ptofile" class="b" /> </asp:LinkButton>
                    </div>
                </td>
                <td >
                    <div class="fadehover" style="left:310px">
                        <asp:LinkButton ID="ProductsMenuTab" runat="server"><img
                            src="images/client_page/products_white_normal.png" alt="Products" class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton3" runat="server"><img
                            src="images/client_page/products_white_hoverl.png" alt="Products" class="b" /> </asp:LinkButton>
                    </div>
                </td>
                <td >
                    <div class="fadehover" style="left:465px">
                        <asp:LinkButton ID="SolutionsMenuTab" runat="server"><img
                            src="images/client_page/solutions_white_normal.png" alt="Solutions"
                            class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton5" runat="server"><img
                            src="images/client_page/solutions_white_hover.png" alt="Solutions"
                            class="b" /> </asp:LinkButton>
                    </div>
                </td>
                <td >
                    <div class="fadehover" style="left:620px">
                        <asp:LinkButton ID="ServicesMenuTab" runat="server"><img
                            src="images/client_page/services_white_normal.png" alt="Services" class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton6" runat="server"><img
                            src="images/client_page/services_white_hoverl.png" alt="Services" class="b" /> </asp:LinkButton>
                    </div>
                </td>
                <td >
                    <div class="fadehover" style="left:775px">
                        <asp:LinkButton ID="SupportMenuTab" runat="server"><img
                            src="images/client_page/support_white_normal.png"alt="Support" class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton7" runat="server"><img
                            src="images/client_page/support_white_hover.png" alt="Support" class="b" /> </asp:LinkButton>
                    </div>
                </td>
                <td >
                    <div class="fadehover" style="left:930px">
                        <asp:LinkButton ID="LinkButton1" runat="server"><img
                            src="images/client_page/contact_us_white_normal.png" alt="ContactUS" class="a" /> </asp:LinkButton>
                        <asp:LinkButton ID="LinkButton8" runat="server"><img
                            src="images/client_page/contact_us_white_hoverl.png" alt="ContactUS" class="b" /> </asp:LinkButton>
                    </div>
                </td>
            </tr>

            </table>
        </div>
        <div id="logo">
                <img src="images/client_page/logo_typing.png" alt="logo" />
        </div>
    <div class="controlsContainer">
            
         <div class="top"><span></span></div>

             <div class="center-content">
                 <div id="div1" style="width:730px;float:left;margin-right:5px;">
                     <asp:Panel ID="UserControlContent" runat="server" Width="730px">
                     test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
                     </asp:Panel>
                 </div>
                </div>

            <div class="bottom"><span></span></div>
            
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" MinDisplayTime="2000"
                Skin="Default">
            </telerik:RadAjaxLoadingPanel>
            </div>
    </div>
    <script type="text/javascript">
        // menu effect.....
        $(document).ready(function() {
            $("img.a").hover(
        function() {
            $(this).stop().animate({ "opacity": "0" }, "slow");
        },
        function() {
            $(this).stop().animate({ "opacity": "1" }, "slow");
        });

        });
        // end menu effect

        $(function() {
            $('ul.spy').simpleSpy();
        });

        (function($) {
            $.fn.simpleSpy = function(limit, interval) {
                // set some defaults
                limit = limit || 4;
                interval = interval || 4000;

                return this.each(function() {
                    // 1. setup
                    // capture a cache of all the list items
                    var $list = $(this),
                    items = [], // uninitialised
                    currentItem = limit,
                    total = 0, //initialise later on
                    height = $list.find('> li:first').height();

                    // capture the cache
                    $list.find('> li').each(function() {
                        items.push('<li>' + $(this).html() + '</li>');
                    });

                    total = items.length;
                    // chomp the list down to limit li elements
                    $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

                    // 2. effect
                    function spy() {
                        // insert a new item with opacity and height of zero
                        var $insert = $(items[currentItem]).css({
                            height: 0,
                            opacity: 0,
                            display: 'none'
                        }).prependTo($list);

                        // fade the LAST item out
                        $list.find('> li:last').animate({ opacity: 0 }, 1000, function() {
                            // increase the height of the NEW first item
                            $insert.animate({ height: height }, 1000).animate({ opacity: 1 }, 1000);

                            // AND at the same time - decrease the height of the LAST item
                            $(this).animate({ height: 0 }, 1000, function() {
                                // finally fade the first item in (and we can remove the last)
                                $(this).remove();
                            });
                        });
                        currentItem++;
                        if (currentItem >= total) {
                            currentItem = 0;
                        }
                        // trigger the effect again in 4 seconds
                        setTimeout(spy, interval);
                    }
                    spy();
                });
            };
        })(jQuery);
        // ************ end spy code
    </script>
   </form>
</body>
</html>

//behind code:
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class Default : Telerik.Web.UI.RadAjaxPage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void HomeMenuTab_Click1(object sender, EventArgs e)
    {

    }
    protected void HomeMenuTab_Click(object sender, EventArgs e)
    {
        Literal l = new Literal();
        l.Text = "Your Code Here<br/>";
        UserControlContent.Controls.Clear();
        UserControlContent.Controls.Add(l);
    }
}

Any Help??

answered on 13 Aug 2010, 12:25 AM

I have something strange...

when when I use jquery effect for my news bar, I got the error, and after I remove it, I got it ok !!

this is the jquery code, so, what is the conflection??

        (function($) {
            $.fn.simpleSpy = function(limit, interval) {
                // set some defaults
                limit = limit || 4;
                interval = interval || 4000;

                return this.each(function() {
                    // 1. setup
                    // capture a cache of all the list items
                    var $list = $(this),
                    items = [], // uninitialised
                    currentItem = limit,
                    total = 0, //initialise later on
                    height = $list.find('> li:first').height();

                    // capture the cache
                    $list.find('> li').each(function() {
                        items.push('<li>' + $(this).html() + '</li>');
                    });

                    total = items.length;
                    // chomp the list down to limit li elements
                    $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

                    // 2. effect
                    function spy() {
                        // insert a new item with opacity and height of zero
                        var $insert = $(items[currentItem]).css({
                            height: 0,
                            opacity: 0,
                            display: 'none'
                        }).prependTo($list);

                        // fade the LAST item out
                        $list.find('> li:last').animate({ opacity: 0 }, 1000, function() {
                            // increase the height of the NEW first item
                            $insert.animate({ height: height }, 1000).animate({ opacity: 1 }, 1000);

                            // AND at the same time - decrease the height of the LAST item
                            $(this).animate({ height: 0 }, 1000, function() {
                                // finally fade the first item in (and we can remove the last)
                                $(this).remove();
                            });
                        });
                        currentItem++;
                        if (currentItem >= total) {
                            currentItem = 0;
                        }
                        // trigger the effect again in 4 seconds
                        setTimeout(spy, interval);
                    }
                    spy();
                });
            };
        })(jQuery);
        // ************ end spy code
    </script>

answered on 18 Aug 2010, 01:43 PM

test.zip

Hello Khaled,

To avoid this error you should remove the following line from your jquery code:

setTimeout(spy, interval);

However, I am sending you a modified project that is working as expected, please give it a try and let me know if other questions or problems arise.

Sincerely yours,
Pavlina
the Telerik team

answered on 01 Oct 2010, 03:42 PM

test-new.zip

Hello Khaled,

I suggest that you use RadAjaxPanel in order to avoid this error (see the attached project). Please give it a try and let me know if it works for you.

Kind regards,
Pavlina
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadAjaxPanel crashing

16 Answers, 1 is accepted