CODEWITHSUNDEEP
c#javascriptjqueryasp.netajax
DooDoo
DooDoo

Reputation: 13487

how to refresh a portion of a page in intervals

I have a page that above it I want to have a panel that automatically refresh every 5 minutes, and if a user has a message in his inbox show to him. What is the best solution for this?

Should I usel AJAX, jQuery, or JavaScript? My preferred solution is server side solution.

Upvotes: 3

Views: 3157

Answers (4)

Tung
Tung

Reputation: 5444

Since you are working with ASP.Net, you can also achieve this behavior by using a combination of the following:

  1. ScriptManager or ScriptManagerProxy (if you have nested pages): Manages the ajax calls
  2. UpdatePanel: Determines what gets updated. Controls nested within <ContentTemplate> are subject to partial updates
  3. Triggers: Controls when the content is updated.

For your purpose, a Timer control can be used as a trigger to ensure that partial postbacks are triggered every 5 seconds:

<asp:ScriptManager ID="scriptManagerMain" runat="server"/>
<asp:Timer ID="timer" Interval="5000" runat="server"/>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Panel ID="panelToBeUpdated" runat="server">
            <asp:Label ID="lblContent" runat="server" ></asp:Label>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="timer" />
    </Triggers>
</asp:UpdatePanel>

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 2822

It's possible to do that with AJAX using method described by previous answers, but if you wish to have a server side solution I would recommend loading that part of the page in an iframe, with meta refresh:

<meta http-equiv="refresh" content="300">

This method however would make it difficult to communicate any events or user actions back to main page.

Upvotes: 1

P. Galbraith
P. Galbraith

Reputation: 2527

Hard to give a specific example without code. But you basically need to load the new content with an ajax request that is triggered by a timer.

setInterval(function(){
    $.ajax({
      url: "someUrlThatServesUpdatedContent.aspx",
      cache: false
    }).done(function( html ) {
      $("#results").html(html);
    });
}, 300000);

The above is just a simple example to point you in the right direction.

Edit: Here is an example of how to do the ajax call without JQuery https://stackoverflow.com/a/2792721/1059001

Upvotes: 1

TGH
TGH

Reputation: 39278

I would use Jquery to send an AJax request to the server to fetch the updated content. Upon receiving the content I would use JQuery again to update the markup.

You can set this up to trigger every 5 min using setInterval in Javascript

Upvotes: 1

Related Questions