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

Need whelp with simple callback

3 Answers 155 Views

XmlHttpPanel

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

Mojo asked on 08 Jul 2009, 12:08 PM

Hi,

I'm trying to make a simple webpage that will update time every second using the new XmlHttpPanel callback. I'm a noob on Javascript, so I ask for your help.

Here's my markup:

    
            <script type="text/javascript"> 
        
                function UpdateTime(sender, args) { 
        
                    var panel = $find("<%=RadXmlHttpPanel1.ClientID%>"); 
        
                    panel.set_value(); 
        
                    window.setInterval(UpdateTime, 1000); 
        
                } 
        
            </script> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"> 
        
            </telerik:RadAjaxLoadingPanel> 
        
            <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" 
        
                Value="test" OnServiceRequest="XmlHttpPanel_ServiceRequest"> 
        
                <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder> 
        
            </telerik:RadXmlHttpPanel> 
        
            <script type="text/javascript"> 
        
                UpdateTime; 
        
            </script>

and here's my codebehind:

    
                Protected Sub XmlHttpPanel_ServiceRequest(ByVal sender As Object, ByVal e As RadXmlHttpPanelEventArgs) 
        
                    Dim val As String = e.Value 
        
                    ph.Controls.Add(New LiteralControl("<font color='#000000'>" & Now.ToString & "</font>")) 
        
                End Sub

The time is updated on pagerefresh, but I can't figure out how to make it update automatically every second.

How do I do that and what is the best approach?

Thanks!
Morten

3 Answers, 1 is accepted

Accepted

answered on 10 Jul 2009, 03:45 PM

Hi Morten,

I have modified your sample project (pasted below) and now the time is updated on every callback. Two issues were causing the application to behave unexpectedly:

You were trying to call the UpdateTime method without arguments (only by specifying its name). Methods in JavaScript are called by specifying the name of the method together with its arguments (e.g. UpdateTime()).
The JavaScript source code in the <script> tag is executed when the application is initialized, and if you try to execute (call) the UpdateTime method there, you will get JavaScript errors because you are trying to use the RadXmlHttpPanel1 client object when it has not been initialized yet. So, the UpdateMethod is called in the pageLoad() method instead. The pageLoad() method is executed when the page is loaded and after all controls have been initialized.

    
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <div> 
        
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"> 
        
                    </telerik:RadAjaxLoadingPanel> 
        
                    <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" 
        
                        OnServiceRequest="XmlHttpPanel_ServiceRequest"> 
        
                        <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder> 
        
                    </telerik:RadXmlHttpPanel> 
        
                </div> 
        
                <script type="text/javascript"> 
        
                    function UpdateTime() 
        
                    { 
        
                        var panel = $find("<%=RadXmlHttpPanel1.ClientID%>"); 
        
                        panel.set_value(); 
        
                        window.setInterval(UpdateTime, 5000); 
        
                    } 
        
                    function pageLoad() 
        
                    { 
        
                        UpdateTime(); 
        
                    } 
        
                </script> 
        
                </form> 
        
            </body> 
        
            </html>

Sincerely yours,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 04 Sep 2009, 09:03 AM

xmlpanelsetinterval.zip

Hi Gregory,

I tested this example a couple of times and the Literal control that is added on every service request is updated and rendered with the respective value. You can see this on the following video captured while running the example.

There is another project attached to this thread that uses a button click to execute a client side function that causes the XmlHttpPanel to update its content every 7 seconds. Please test it and let us know if the content changes are rendered on the screen.

If you still have problems with the example, please put together a simple running project where we can reproduce your behavior, and sent it back. Also, can you please provide more information about your project setup and the logic you are using?

Sincerely yours,
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.