RadAjaxPanel crashing

17 posts, 0 answers
  1. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2010 Link to this post

    hi,

    in my master page, I have RadScriptManager control, and RadAjaxPanel,

    as I an new in rad controls, I was following a video to very basic update a lable without postback (http://tv.telerik.com/watch/aspnet/radajax/radajax-overview), when I run my site, after I click the link button to update the lable, somethimes I got this error:  

    Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Invalid JSON primitive: .

    so how shall I solve it?
  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 11 Aug 2010 Link to this post

    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
  3. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2010 Link to this post

    Great, may I know what version of telerik you are using exactly?

    (( my version is Q1 2010 ))

    moreover I have two cases,
    I require the button to be in master page, and should load usercontrol or aspx page to ContentPlaceeHolder
    or
    the button in aspx page or usercontrol and that button loading another content to ContentPlaceeHolder
  4. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 11 Aug 2010 Link to this post

    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">
                <!--end of round corners-->
             <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>
                <!--end of round corners-->
                <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??
  5. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 12 Aug 2010 Link to this post

    Hi Khaled,

    You can review the help article below for more information about how to achieve the desired functionality:
    MasterPages: ajaxify and update controls in master and content page

    Kind regards,
    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
  6. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 12 Aug 2010 Link to this post

    hi, I followed the article and I read it carefully, and I implement in my aspx page same as the article, but I dont know why I got that error always !!!!!!!

    can u please just take a short look to asp code above?
  7. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 12 Aug 2010 Link to this post

    Hi Khaled,

    Your code looks correct. However, to determine what the root cause of the error you are facing is, please open a formal support ticket and send us sample runnable application which replicates the issue. We will test it locally and advise you further.

    Regards,
    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
  8. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 12 Aug 2010 Link to this post

    ok, I have the smaple project, but I am unable to post it here (because max size is 2 mb) so I post it in other location:

    http://www.4shared.com/file/ZmSjiR7S/test.html

    please test it and let me know....
  9. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 12 Aug 2010 Link to this post

    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>

  10. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 14 Aug 2010 Link to this post

    going up and waiting for telerik experts to help.....
  11. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 18 Aug 2010 Link to this post

    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
    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
  12. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 19 Sep 2010 Link to this post

    thanks,
    but if I removed setTimeout(spy, interval); command, I won't have the effect of my news bar (the motion effect)!!
    so, what to do??
  13. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 23 Sep 2010 Link to this post

    Hi khaled,

    Could you please try to use UpdatePanel instead of RadAjaxPanel and see if you receive the Invalid JSON primitive error when you are using setTimeout(spy, interval) in the jquery code?

    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
  14. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 23 Sep 2010 Link to this post

    hi,

    I have asp.net LinkButton, where it has been configured with RadAjaxManager to update asp.net panel.

    I dont have RadAjaxPanel in my code,
  15. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 28 Sep 2010 Link to this post

    Hi Khaled,

    What happens when you use UpdatePanel instead of RadAjaxManager control? Do you receive Invalid JSON primitive error?

    Sincerely yours,
    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
  16. khaled jendi
    khaled jendi avatar
    64 posts
    Member since:
    Mar 2010

    Posted 28 Sep 2010 Link to this post

    yes, I did, you can try it from project I posted for u
  17. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 01 Oct 2010 Link to this post

    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
    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
Back to Top