Question

In Javascript I’m calling a function that retrieves data from a data table and converts it to javascriptSerializer, I then use the data in a Javascript chart. Everything works fine the first time round, as soon I change the Dataset selection parameters i.e dates etc, and call Function PopulateChart() again to try to pull a new set of data, I have a problem retrieving it in the javascript. The data and json string is populated correctly on the server but not on the client, the old string of data still exists.

var chartData still shows the old Data, even through the returned serializer.Serialize(rows) shows the correct data on the server

Below is my code and what I’m trying to achieve.

ASPX

                var chartData = <%= PopulateChart() %>;

VB

            Public Function PopulateChart() As String

                ''Get Chart Data
                Dim daChart As New dsSVTableAdapters.clsChart
                Dim dtChart As New dsSV.webV1_ChartsDataTable
                Dim drChart As dsSV.webV1_ChartsRow

                dtChart = daChart.GetChart(hChartID.Value)

                If dtChart.Rows.Count > 0 Then

                    drChart = dtChart.Rows(0)
                    hChartName.Value = drChart.Description

                    HInterval.Value = drChart.Interval
                    Dim dtData As DataTable
                    Dim ds As New DataSet()
                    ds = GetData(4, DateTime.Parse("2012-05-01"), DateTime.Parse("2012-06-30"))
                    dtData = ds.Tables(0)

                    Dim serializer As System.Web.Script.Serialization.JavaScriptSerializer = New System.Web.Script.Serialization.JavaScriptSerializer()
                    Dim rows As New List(Of Dictionary(Of String, Object))

                    Dim row As Dictionary(Of String, Object)

                    For Each dr As DataRow In dtData.Rows
                        row = New Dictionary(Of String, Object)
                        For Each col As DataColumn In dtData.Columns
                            If col.ColumnName = "DateAndTime" Then
                                Dim dts As DateTime = DateTime.Parse(dr(col).ToString())
                                row.Add(col.ColumnName, dts.ToString("yyyy-MM-dd hh:mm:ss"))
                            ElseIf col.ColumnName = "Time" Then
                                Dim ts As DateTime = DateTime.Parse(dr(col).ToString())
                                row.Add(col.ColumnName, ts.ToString("hh:mm:ss"))
                            Else
                                row.Add(col.ColumnName, dr(col))
                            End If
                        Next
                        rows.Add(row)
                    Next

                    serializer.MaxJsonLength = Int32.MaxValue


                    Return serializer.Serialize(rows)
                End If

            End Function

Answer 1

var chartData = <%= PopulateChart() %>; will only get evaluated server side at each page load, the <%=....%> is an asp.net wrapper for rendering content in a webpage when and only at a page request. it will not make the PopulateChart() function available to JavaScript on the client side.

you will need to load new data either by ajax calls or reloading the entire page with request parameters indicating what data is to be loaded.

Here is an article on codeproject about asp.net and ajax using jquery.

http://www.codeproject.com/Articles/17203/Using-jQuery-for-AJAX-in-ASP-NET