How to Refresh only few parts of website

Question

I am using a pie chart in my webpage which have to be updated every 4 seconds so I have used this

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <meta http-equiv="refresh" content="4" />

My pie chart is in the bottom of the page. Everytime the page refreshes the page goes to the top. by the time I scroll down to view the pie chart it refreshes again.

    //Passing values to draw pie chart

    var pie1 = new RGraph.Pie('pie1', <%= Session["uStats"] %>);
 // Create the pie object
            pie1.Set('chart.key', ['Read', 'Received', 'Not Received']);
            pie1.Set('chart.key.align', 'right');
            pie1.Set('chart.key.position.x', 200);
            pie1.Set('chart.key.position.y', 100);
            //pie1.Set('chart.gutter.right', 100);
            pie1.Set('chart.colors',['#86cf21', '#eaa600', '#e01600']);
            pie1.Set('chart.title', "Message Status");
            pie1.Set('chart.align', 'left');
            pie1.Set('chart.shadow', true);
            pie1.Set('chart.radius', 70);
            pie1.Set('chart.labels.sticks', false);
             pie1.Set('chart.tooltips.effect', 'fade');
            pie1.Set('chart.tooltips.event', 'onmousemove');
            pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d


            if (!RGraph.isIE8()) 
            {
                pie1.Set('chart.zoom.hdir', 'center');
                pie1.Set('chart.zoom.vdir', 'up');
                pie1.Set('chart.labels.sticks', false);
                pie1.Set('chart.labels.sticks.color', '#aaa');
            }
            pie1.Draw();
        }
//I add the values to the session. 
Session.Add("uStats", "[" + read + "," + received2 + "," + NotReceived + "]");


 <div id="pie" "top: 165px; left: 536px; width: 74px; position: absolute; height: 529px;">
        <canvas id="pie1" width="400" height="400">[No canvas support]</canvas>        
        </div>

 <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px;
                top: 621px; position: absolute; height: 250px; width: 287px">
                <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px;
                    position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False"
                    OnRowDataBound="MyGrid_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Status">
                            <ItemTemplate>
                                <asp:Image ID="Status" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False"
                            ReadOnly="True" SortExpression="TimeReceived" />
                        <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                    </Columns>
                </asp:GridView>

        </asp:Panel>

I have to update the table and the pie chart

What is the solution to refresh only the required parts of the website and make the webpage to stay on the exact place instead of going to the top

Answer 1

I would need to know more about your design to say anything definitively, but you can probably use an UpdatePanel to update your chart at certain intervals. Only what's inside of the UpdatePanel would get updated.

Here's an example of how to update contents every second:

http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html

Answer 2

Typically the way to do this is to write a small page which can output either a snippet of JSON or raw HTML that represents the part that's changed. This page will then be called periodically from Javascript via XMLHttpRequest, its output captured and then either inserted directly into the page to replace the existing content or, if JSON, its values used to update the content in place.

Exactly how to do this varies based on your situation, codebase, style, etc..

Answer 3

What is the solution to refresh only the required parts

AJAX.

The tools you use are up to you, but the concept is the same. Essentially what you need to have is some JavaScript on the page which occasionally makes a request to a server resource to get updated data and to update the relevant elements on the page.

Here's a simple example of how this behaves in a browser and how the client-side code and server-side code interacts.