ajaxRequest does not function properly

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

    Posted 31 Dec 2009 Link to this post

    Hi,

    I'm trying to build up a portal home page that retrieve a big amount of data. One of the best options i had is to load the homepage (first half) and then fire ajaxRequest calls to retrieve the rest of sections upon the load completion (second lower half).

    below are the scenario steps I'm trying to achieve,

    1. user request homepage
    2. homepage loads and a JavaScript fires to call for the first ajaxRequest
    3. first call is made, and once done it fires the next ajaxRequest "since you can't retrieve all sections in parallel"
    4. point number 3 keeps recurring several time until all sections are retrieved

    I implemented the above scenario using RadAjaxPanel and it worked so fine, however using RadAjaxManager is much better as per several articles posted on your forum.

    I tried hard to implement the above scenario using RadAjaxManager, and almost succeeded however the content is not updated even after a successful ajaxRequest, I traced the whole solution from the point of the first request and every thing works fine however it does not update the DIVs.

    below is the XHTML code,

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <style type="text/css"
     
    .MyAjaxLoadingPanel 
        background:#fff url(images/ajax-loader.gif) center center no-repeat; 
     
    </style> 
    </head> 
    <body onload="initTimer();return false;"
     
        <form id="form1" runat="server"
         
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
         
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  
            RequestQueueSize="5" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            <ClientEvents OnResponseEnd="reqEnd" /> 
            </telerik:RadAjaxManager> 
         
         
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"  
            BackColor="White" EnableViewState="False" CssClass="MyAjaxLoadingPanel"
            <div style="width:100%; padding-top:20px; text-align:center; font-family:Tahoma; font-size:12px;" >Loading...</div> 
        </telerik:RadAjaxLoadingPanel>   
           
        <div style=" background-color:#eeeeee;width:400px; height:200px;" ID="div1" runat="server">         
                 <br /> 
            <ul> 
            <asp:Repeater ID="Repeater1" runat="server" EnableViewState="False"
            <ItemTemplate> 
            <li>            
                <%#Container.DataItem("column")%> 
            </li>         
            </ItemTemplate> 
            </asp:Repeater> 
            </ul>               
        </div> 
         
        <br /> 
        <div style=" background-color:#eeeeee;width:400px; height:200px;" ID="div2" runat="server">           
                  <br /> 
            <ul> 
            <asp:Repeater ID="Repeater2" runat="server" EnableViewState="False"
            <ItemTemplate> 
            <li>               
                <%#Container.DataItem("column")%> 
            </li>         
            </ItemTemplate> 
            </asp:Repeater> 
            </ul>         
        </div> 
         
        <br /> 
        <div style=" background-color:#eeeeee;width:400px; height:200px;" ID="div3" runat="server">         
                  <br /> 
            <ul> 
            <asp:Repeater ID="Repeater3" runat="server" EnableViewState="False"
            <ItemTemplate> 
            <li>             
                <%#Container.DataItem("column")%> 
            </li>         
            </ItemTemplate> 
            </asp:Repeater> 
            </ul>         
        </div> 
         
         <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
        <script language="javascript" type="text/javascript"
        var id,id2,id3; 
     
        function initTimer() {       
                 idsetTimeout('AJAXReq()', 5000);              
        }          
     
        function AJAXReq(){         
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>"); 
                ajaxManager.ajaxRequest("Sport"); 
                clearTimeout(id); 
        } 
         
        function reqEnd(sender, eventArgs){         
            switch (eventArgs.get_eventArgument()) 
                { 
                    case "Sport":                     
                        id2 = setTimeout('AJAXReq2()', 200); 
                        break; 
                    case "Health": 
                        id3setTimeout('AJAXReq3()', 200); 
                      break;                 
                } 
            } 
     
            function AJAXReq2() {            
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>"); 
                ajaxManager.ajaxRequest("Health"); 
                clearTimeout(id2); 
            } 
     
            function AJAXReq3() {            
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>"); 
                ajaxManager.ajaxRequest("Science"); 
                clearTimeout(id3); 
            } 
             
        </script> 
        </telerik:RadCodeBlock> 
         
        </form> 
    </body> 
    </html> 

    and here is the code behind,

    Imports System.Data.SqlClient 
     
    Partial Class test 
        Inherits System.Web.UI.Page 
     
     
        Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As ObjectByVal e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest 
            Select Case e.Argument 
                Case "Sport" 
     
                    Threading.Thread.Sleep(1000) 
     
     
                    Dim x As New Database 
                    Dim s1 As SqlDataReader = x.ExecuteReader("Select query"
                    Me.Repeater1.DataSource = s1 
                    Me.Repeater1.DataBind() 
                    s1.Close() 
     
     
                    RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, div2, Me.RadAjaxLoadingPanel1) 
     
     
                Case "Health" 
     
                    Threading.Thread.Sleep(1000) 
     
                    Dim x As New Database 
                    Dim s1 As SqlDataReader = x.ExecuteReader("Select query"
                    Me.Repeater2.DataSource = s1 
                    Me.Repeater2.DataBind() 
                    s1.Close() 
     
     
                    RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, div3, Me.RadAjaxLoadingPanel1) 
     
                Case "Science" 
     
                    Threading.Thread.Sleep(1000) 
     
                    Dim x As New Database 
                    Dim s1 As SqlDataReader = x.ExecuteReader("Select query"
                    Me.Repeater3.DataSource = s1 
                    Me.Repeater3.DataBind() 
                    s1.Close() 
     
            End Select 
     
        End Sub 
     
        Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
            If Not Page.IsPostBack Then ' tried it without page.IsPostBack, however loading panel shows for all sections once an ajaxRequest is executed 
                RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, div1, Me.RadAjaxLoadingPanel1) 
            End If 
        End Sub 
     
    End Class 
     

    Note: this scenario is an updated version for the below scenario and issue,
    http://www.telerik.com/community/forums/aspnet-ajax/ajax/loading-panel-not-displaying.aspx

    Awaiting your reply

    Happy new year :-)

  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 31 Dec 2009 Link to this post

    As you might know the AjaxManager can be set up so that when one control performs an action, another control is updated. What I believe you are missing is this setup, where controls update each other. In your case what I would do is have all controls connected to all others, and then narrow down that list for each control. I suspect that you may just need to have a control update itself, since it is most likely the control itself that is making the Ajax request, and therefore needs to be updated by itself (if that makes sense :P).
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 03 Jan 2010 Link to this post

    Hi Schlurk,

    First of all let me wish you a Happy New Year :-)

    Secondly, I do really appreciate your reply and help :-)

    I am aware of the AjaxManager functionality (controls update another controls), however I didn't miss the setup my friend, instead I did it programmatically. Because setting up the AjaxManager will result in showing the LoadingPanel for all controls once any of these controls is updated.

    Your idea of connecting the controls to each other makes a lot of sense, yet I have no idea how to implement, therefore I would really appreciate if you can provide a sample code.

    As I mentioned before, a control "mostly a repeater" should be updated right after the completion of the previous control update "mostly a repeater".

    Thanks again and have a nice day :-)

    Regards,
  5. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 04 Jan 2010 Link to this post

    I had something similar happen in a previous thread where the controls were not being updated after the AjaxRequest event was fired. What I managed to figure out was the following:

    ASPX:
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title></title
        <telerik:RadCodeBlock ID="myCodeBlock" runat="server"
            <script type="text/javascript"
                function OnClientClose(sender, eventArgs) { 
                    if (sender) { 
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>"); 
                        if (ajaxManager) { 
                            ajaxManager.ajaxRequest("test"); 
                        } 
                    } 
                } 
            </script> 
        </telerik:RadCodeBlock> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadComboBox1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <br /> 
        <telerik:RadComboBox ID="RadComboBox1" runat="server"
        </telerik:RadComboBox> 
        <br /> 
        <telerik:RadWindow ID="RadWindow1" runat="server" Enabled="true" VisibleOnPageLoad="true" OnClientClose="OnClientClose"
        </telerik:RadWindow> 
        </form> 
    </body> 
    </html> 

    C#:
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) 
        { 
            RadAjaxManager1.Alert("AjaxRequest raised from the " + e.Argument); 
            RadComboBoxItem myItem = new RadComboBoxItem("Test"); 
            RadComboBox1.Items.Add(myItem); 
            RadComboBox1.SelectedValue = "Test"
        } 

    So when the RadWindow closes the RadComboBox has an item added to it through the AjaxRequest event. If you take a look at the Ajax settings you will see that I am linking the RadAjaxManager to the RadComboBox, since the AjaxRequest event is taken care of through the AjaxManager. I'm not sure what the exact code-behind is for that but taking a look at your code it would seem as if the equivalent is being done. What I think might be the issue is the fact that you are adding these Ajax settings in the AjaxRequest event. I'm not sure if this can be handled there properly and perhaps you will have to add these settings at an earlier point.
  6. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 07 Jan 2010 Link to this post

    Dear Schlurk,

    Thank you so much for both help and guidance, however I can't find the needed solution in the code you posted. I do understand your point but as I said before you can't use the wizard to setup the AJAXRequest because it will make the LoadPanel show for all updated controls "Please see my code at the beginning of this thread" and that is why I do it programmatically.

    once again I do really appreciate your help, yet I need a real solution for my problem and I do welcome all suggestions.

    Thank you Schlurk
  7. Carl
    Admin
    Carl avatar
    11 posts

    Posted 08 Jan 2010 Link to this post

    Hi Loai

    Would you be able to submit a working sample of this in a formal support ticket? This will allow us to test what you are experiencing locally.

    All the best,
    Carl
    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.
  8. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 10 Jan 2010 Link to this post

    Hi Carl,

    Unfortunately my annual subscription has finished, therefore I can't submit any support ticket. I'm planning to renew my subscription, however I wont do that before the mid of February. Any way thanks for your help and support.

    Regards,
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017