How to update the session values on partial post back and how to make Javascript use the new values

Posted by Mano on Stack Overflow See other posts from Stack Overflow or by Mano
Published on 2011-10-04T12:11:46Z Indexed on 2011/11/16 17:51 UTC
Read the original article Hit count: 274

The problem I am facing is the I am passing values to javascript to draw a graph using session values in the code behind. When page loads it take the value from the session and creates the graph, when I do partial post back using a Update Panel and Timer, I call the method to add values to the session and it does it.

public void messsagePercentStats(object sender, EventArgs args)
    {
     ...
       if (value >= lowtarg && value < Toptarg)
            {
                vProgressColor = "'#eaa600'";
            }
            else if (value >= Toptarg)
            {
                vProgressColor = "'#86cf21'";
            }
            Session.Add("vProgressColor", vProgressColor);
            Session.Add("vProgressPercentage", "["+value+"],["+remaining+"]");
             }
     }

I use the update panel to call the above method

<asp:ScriptManager ID="smCharts" runat="server" />

        <asp:UpdatePanel runat="server" ID="Holder" OnLoad="messsagePercentStats" UpdateMode="Conditional">
            <ContentTemplate>
 <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer_Tick" />

and the timer_tick method is executed every 5 seconds

protected void Timer_Tick(object sender, EventArgs args)
    {            
          ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "r.init();", true);
          ResponseMetric rm = new ResponseMetric(); 
        Holder.Update();        
    }

I use ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "r.init();", true); to call the r.init() Java script method to draw the graph on post back and it works fine.

Java Script:

 var r = {  
        init : function(){  
   r = Raphael("pie"),

                    data2 = [<%= Session["vProgressPercentage"] %>];
                    axisx = ["10%", "20%"];
            r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
             r.g.barchart(80, 25, 100, 320, data2, { stacked: true, colors: [<%= Session["vProgressColor"] %>,'#fff'] });
             axis2 = r.g.axis(94, 325, 280, 0, 100, 10, 1);
        }
        }
          window.onload = function () {
          r.init();
        };

This Java Script is not getting the new value from the session, it uses the old value when the page was loaded. How can I change the code to make sure the JS uses the latest session value.

© Stack Overflow or respective owner

Related posts about c#

Related posts about JavaScript