This is a migrated thread and some comments may be shown as answers.
RadAjaxPanel crashing
16 Answers 118 Views
This is a migrated thread and some comments may be shown as answers.
khaled jendi
Top achievements
Rank 1
khaled jendi asked on 11 Aug 2010, 02:26 PM
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?

16 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 11 Aug 2010, 03:43 PM
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
0
khaled jendi
Top achievements
Rank 1
answered on 11 Aug 2010, 06:39 PM
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
0
khaled jendi
Top achievements
Rank 1
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">
            <!--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??
0
Pavlina
Telerik team
answered on 12 Aug 2010, 01:46 PM
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
0
khaled jendi
Top achievements
Rank 1
answered on 12 Aug 2010, 03:08 PM
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?
0
Pavlina
Telerik team
answered on 12 Aug 2010, 05:13 PM
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
0
khaled jendi
Top achievements
Rank 1
answered on 12 Aug 2010, 07:06 PM
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....
0
khaled jendi
Top achievements
Rank 1
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>

0
khaled jendi
Top achievements
Rank 1
answered on 14 Aug 2010, 04:28 PM
going up and waiting for telerik experts to help.....
0
Pavlina
Telerik team
answered on 18 Aug 2010, 01:43 PM
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
0
khaled jendi
Top achievements
Rank 1
answered on 19 Sep 2010, 01:59 PM
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??
0
Pavlina
Telerik team
answered on 23 Sep 2010, 10:25 AM
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
0
khaled jendi
Top achievements
Rank 1
answered on 23 Sep 2010, 10:58 AM
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,
0
Pavlina
Telerik team
answered on 28 Sep 2010, 04:28 PM
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
0
khaled jendi
Top achievements
Rank 1
answered on 29 Sep 2010, 12:06 AM
yes, I did, you can try it from project I posted for u
0
Pavlina
Telerik team
answered on 01 Oct 2010, 03:42 PM
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
Tags
Ajax
Asked by
khaled jendi
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
khaled jendi
Top achievements
Rank 1
Share this question
or