ajaxRequest HELP NEEDED

7 posts, 1 answers
  1. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 07 Jan 2010 Link to this post

    Telerik guys,

    Please note the below,

    • I posted a thread asking for help two times before (Thread 1 and Thread 2) and couldn't find a solution yet
    • I read 70% of the 264 threads related to ajaxRequest issues and couldn't find a solution
    • I want to buy the new ASP.NET AJAX controls, but to be honest, I'm reconsidering doing that because I still can't implement the needed scenarios

    What I'm looking for?

    I need to implement the below scenario, and please, please, please, provide sample codes if you want to help.

    1- User open page
    2- Page sends an Ajax request after 5 seconds to server
    3- Server receives the request and updates the first section on page through AJAX
    4- First section is updated successfully, once done a new AJAX request is sent to server to update the next section
    5- Server receives the request and updates the second section
    6- Update the rest of sections through recurring the steps 3 to 4

    I was able to implement the above scenario using Rad AJAX Panel in few hours, however I need to implement it using Rad AJAX Manager for better performance as most of you in here advised. It has been 4 days now and I'm stuck with this scenario, therefore your help is highly appreciated.

    On a separate note, I reached a point where the above scenario works fine but with the below issues,
    • RAD Loading Panel does not show, yet data displayed correctly
    • RAD Loading Panel shows but no data to display
    • Data display correctly and Loading panel shows but in the wrong places/order

    I already provided my code in previous threads, all what I ask for is a clear example for the above scenario in any language.

    Thanks for your help in advance

    Regards,

  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 07 Jan 2010 Link to this post

    What is it that's being updated?  Panels, Grids...?

    If you want performance perhaps this might work
    1) jQuery document.ready function which calls a setTimeout to wait 5 seconds
    2) Then it'll set a value in a RadXmlHttpPanel, which then calls the other panel on ResponseEnd, and repeat

    If your updates\controls work in the RadXmlHttpPanel scenario it'd be much faster than a standard ajax callback because you wouldn't need to run through the entire page lifecycle...and if you used webservices to populate the data you wouldn't need to postback at all.

    I guess the same principle could be applied to call the ajax manager clientside methods as well if an XmlHttpPanel can't be used.

    I submitted the demo project\sample to the code library, maybe it'll get approved...maybe it wont :)  I cant seem to attach anything other than images to this.
    http://www.telerik.com/community/code-library/aspnet-ajax/ajax.aspx



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 10 Jan 2010 Link to this post

    Dear Steve,

    Thanks a bunch for your help and support, apperntly telerik did not approve your code because I can't find it on the codes library section.

    I will try out your suggestion of using RadXmlHttpPanel, it may solve out the probelm.

    Many Thanks, :-)
  5. Answer
    Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 10 Jan 2010 Link to this post

    <%@ 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"
        <title></title
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
         
    </head> 
    <body> 
        <form id="form1" runat="server"
        <!-- Include jQuery --> 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            <Scripts> 
                <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" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <telerik:RadFormDecorator ID="decorator" runat="server" DecoratedControls="Fieldset" Skin="Windows7" /> <!-- Only required to be fancy --> 
         
        <div> 
            <!-- Show the time the page loads --> 
            <asp:Label ID="startdate" runat="server" CssClass="item" /> 
         
            <!-- First Panel to be Updated -->    
            <fieldset> 
                <legend>Panel 1</legend> 
                <telerik:RadXmlHttpPanel ID="updatePanel1" runat="server" OnServiceRequest="UpdatePanel1_ServiceRequest" BackColor="#e6e6e6" OnClientResponseEnded="updateSecondPanel" CssClass="item">     
                    <asp:Label ID="date1" runat="server" /> 
                </telerik:RadXmlHttpPanel> 
            </fieldset> 
             
            <!-- Second Panel to be Updated -->    
            <fieldset> 
                <legend>Panel 2</legend> 
                <telerik:RadXmlHttpPanel ID="updatePanel2" runat="server" BackColor="#c00300" ForeColor="Wheat" OnServiceRequest="UpdatePanel2_ServiceRequest" OnClientResponseEnded="updateOtherPanels"  CssClass="item" > 
                    <asp:Label ID="date2" runat="server" Text="" /> 
                </telerik:RadXmlHttpPanel> 
            </fieldset> 
             
            <!-- REST OF CONTENT --> 
            <fieldset> 
                <legend>Other Content</legend> 
                <telerik:RadXmlHttpPanel ID="updatePanel3" runat="server" BackColor="#f96433" ForeColor="Wheat" OnServiceRequest="UpdateRest_ServiceRequest" CssClass="item" > 
                    <asp:Label ID="date3" runat="server" Text="" /> 
                    <asp:Label ID="date4" runat="server" Text="" /> 
                </telerik:RadXmlHttpPanel> 
            </fieldset> 
            
            <telerik:RadCodeBlock runat="server"
                <script type="text/javascript"
                    //5 Seconds passed, this gets called from document.ready 
                    function updatepanel1() { 
                        var panel = $find('<%= updatePanel1.ClientID %>'); 
                        panel.set_value('1'); 
                    } 
     
                    //First panel finishes, here we are 
                    function updateSecondPanel(sender, args) { 
                        var panel = $find('<%= updatePanel2.ClientID %>'); 
                        panel.set_value('2'); 
                    } 
     
                    //Panel 2 finished update, we're updating the other controls now 
                    function updateOtherPanels(sender, args) { 
                        var panel3 = $find('<%= updatePanel3.ClientID %>'); 
                        panel3.set_value('2'); 
                    }  
                </script> 
             </telerik:RadCodeBlock> 
              
             <script type="text/javascript"
                 //START THE UPDATE ON PAGE LOAD 
                 $telerik.$(document).ready(function () { 
                     setTimeout("updatepanel1()", 5000); 
                 }); 
            </script> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    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 : System.Web.UI.Page  
        protected void Page_Load(object sender, EventArgs e) 
        { 
            startdate.Text = "Started: " + DateTime.Now.ToString(); 
        } 
        protected void UpdatePanel1_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e) { 
            date1.Text = DateTime.Now.ToString(); 
        } 
     
        protected void UpdatePanel2_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e) { 
            date2.Text = DateTime.Now.ToString(); 
        } 
     
        protected void UpdateRest_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e) { 
            date3.Text = DateTime.Now.ToString(); 
            date4.Text = DateTime.Now.ToString(); 
        } 
     


    ## WEBSERVICE ##
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultWebService.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"
        <title></title
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
         
    </head> 
    <body> 
        <form id="form1" runat="server"
        <!-- Include jQuery --> 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            <Scripts> 
                <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" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <telerik:RadFormDecorator ID="decorator" runat="server" DecoratedControls="Fieldset" Skin="Windows7" /> 
        <div> 
            <!-- Show the time the page loads --> 
            <asp:Label ID="startdate" runat="server" CssClass="item" /> 
         
            <!-- First Panel to be Updated -->    
            <fieldset> 
                <legend>Panel 1</legend> 
                <telerik:RadXmlHttpPanel ID="updatePanel1" runat="server" WebMethodName="Update1" WebMethodPath="WebService.asmx" BackColor="#e6e6e6" OnClientResponseEnded="updateSecondPanel" CssClass="item">     
                </telerik:RadXmlHttpPanel> 
            </fieldset> 
             
            <!-- Second Panel to be Updated -->    
            <fieldset> 
                <legend>Panel 2</legend> 
                <telerik:RadXmlHttpPanel ID="updatePanel2" runat="server" BackColor="#c00300" ForeColor="Wheat" WebMethodName="Update2" WebMethodPath="WebService.asmx" OnClientResponseEnded="updateOtherPanels"  CssClass="item" > 
                </telerik:RadXmlHttpPanel> 
            </fieldset> 
             
            <!-- REST OF CONTENT --> 
            <fieldset> 
                <legend>Other Content</legend> 
                <telerik:RadXmlHttpPanel ID="updatePanel3" runat="server" BackColor="#f96433" ForeColor="Wheat" WebMethodName="Update3" WebMethodPath="WebService.asmx" CssClass="item" > 
                </telerik:RadXmlHttpPanel> 
            </fieldset> 
            
            <telerik:RadCodeBlock runat="server"
                <script type="text/javascript"
                    //5 Seconds passed, this gets called from document.ready 
                    function updatepanel1() { 
                        var panel = $find('<%= updatePanel1.ClientID %>'); 
                        panel.set_value('1'); 
                    } 
     
                    //First panel finishes, here we are 
                    function updateSecondPanel(sender, args) { 
                        var panel = $find('<%= updatePanel2.ClientID %>'); 
                        panel.set_value('2'); 
                    } 
     
                    //Panel 2 finished update, we're updating the other controls now 
                    function updateOtherPanels(sender, args) { 
                        var panel3 = $find('<%= updatePanel3.ClientID %>'); 
                        panel3.set_value('2'); 
                    }  
                </script> 
             </telerik:RadCodeBlock> 
              
             <script type="text/javascript"
                 //START THE UPDATE ON PAGE LOAD 
                 $telerik.$(document).ready(function () { 
                     setTimeout("updatepanel1()", 5000); 
                 }); 
            </script> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    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 : System.Web.UI.Page  
        protected void Page_Load(object sender, EventArgs e) 
        { 
            startdate.Text = "Started: " + DateTime.Now.ToString(); 
        } 
     
     

    <%@ WebService Language="C#" Class="WebService" %> 
     
    using System; 
    using System.Web; 
    using System.Web.Services; 
    using System.Web.Services.Protocols; 
     
    [WebService(Namespace = "http://tempuri.org/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.  
    [System.Web.Script.Services.ScriptService] 
    public class WebService  : System.Web.Services.WebService { 
     
        [WebMethod(CacheDuration=0)] 
        public string Update1(object context) { 
            return DateTime.Now.ToString(); 
        } 
         
        [WebMethod(CacheDuration = 0)] 
        public string Update2(object context) { 
            return DateTime.Now.ToString(); 
        } 
         
        [WebMethod(CacheDuration = 0)] 
        public string Update3(object context) { 
            return DateTime.Now.ToString(); 
        } 




  6. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 10 Jan 2010 Link to this post

    Steve,

    Thank you so much pal, I shall start implementing the scenario right the way.

    Thanks a lot for your help.

    Regards,
  7. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 11 Jan 2010 Link to this post

    Steve,

    Thanks again for your help, you made my day :-)

    It works exactly the way I want, and using firebug it shows a big difference in size and load time which is faster than using RadUpdatePanel or RadAjaxManager.

    Thank you so much :-)

    Regards,
  8. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jan 2010 Link to this post

    Hi Steve,

    Thank you for sharing your ideas with the community.

    I have carefully examined the project you have submitted to our code library and noticed that we have a very similar online demo that follows your scenario - chain RadXmlHttpPanels after page load. Here is a link to the online demo: http://demos.telerik.com/aspnet-ajax/xmlhttppanel/examples/default/defaultcs.aspx

    In the online demo there are three RadXmlHttpPanel controls. Two of them show the same information, customers from a given country, but use different ways to update their content (Callback and WebService). The third one shows information about a specific customer. On page load the country customers are loaded within the two panels and the information in the third panel is loaded by initializing a partial page load from one of the previous panels (when the response is finished).

    This being said, I will remove the source code from our Code Library and attach it to the thread. This way way the people will have access to both our online demo and your project.


    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017