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

ajaxRequest does not function properly

6 Answers 126 Views

Ajax

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

loai taha asked on 31 Dec 2009, 09:03 AM

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,

user request homepage
homepage loads and a JavaScript fires to call for the first ajaxRequest
first call is made, and once done it fires the next ajaxRequest "since you can't retrieve all sections in parallel"
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() {       
        
                         id= setTimeout('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": 
        
                                id3= setTimeout('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 Object, ByVal 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 Object, ByVal 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 :-)

6 Answers, 1 is accepted

answered on 03 Jan 2010, 07:05 AM

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,

answered on 04 Jan 2010, 04:48 PM

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.

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

ajaxRequest does not function properly

6 Answers, 1 is accepted