检索json数据后，Javascript未填充图表

Question

I have a div to handle chart <div id="LineSumbalance"></div> and textbox to key parameter, button to fire.

<asp:TextBox ID="txtDate" CssClass="form-control" runat="server"></asp:TextBox>
<asp:TextBox ID="txtSearchTerm" runat="server" Width="200px" class="form-control" placeholder="Terminal Number" spellcheck="false"></asp:TextBox>
<asp:Button ID="btnSearchTerm" runat="server" Text="Search" class="btn  btn-primary" />

I write a code behind to query data from database:

<WebMethod()>
Public Shared Function GetChart(ByVal Tdate As String, ByVal Term As String) As List(Of Object)
    Dim BizFunc As New BizFunction.UtilFormat
    Dim chartData As New List(Of Object)()

    Dim TabName As String = "TA" & Tdate
    Dim TodayDate As String = BizFunc.Date2YYMM(Today.Date)
    Dim labels As New List(Of String)()
    If Tdate = Mid(TodayDate, 1, 4) Then
        TabName = "(select * from " & TabName & " union all select * from TA" & TodayDate & ") TA "
    End If
    Dim query As String = "WITH t1  AS (SELECT dt,DATEADD(MONTH,DATEDIFF(MONTH,'1900-01-01',dt),'1900-01-01') AS firstInMonth,DATEADD(DAY,-1,DATEADD(MONTH,DATEDIFF(MONTH,'1900-01-01',dt)+1,'1900-01-01')) AS lastInMonth,amount " &
        " FROM(SELECT CONVERT(DATE, tran_date) AS dt,COUNT(*) AS AMOUNT FROM " & TabName & " WHERE TERM Like '%" & Term.PadRight(16, " ") & "%' and (TRANS = '05' or TRANS = '06') GROUP BY TRAN_DATE) AS st " &
        "Group BY dt, amount), " &
        "Calendar  " &
        " AS (SELECT DISTINCT DATEADD(DAY, c.number,t1.firstInMonth) AS d FROM t1 JOIN master..spt_values AS c On type = 'P' AND DATEADD(DAY,c.number,t1.firstInMonth) BETWEEN t1.firstInMonth AND t1.lastInMonth) " &
        " Select DatePart(dd, d) Date, Case When amount Is NULL Then 0 Else amount End As amount FROM calendar As c LEFT JOIN t1 On t1.dt = c.d;"
    Dim dtbal As DataTable = GetData(query)

    Dim series1 As New List(Of Integer)()

    For Each row As DataRow In dtbal.Rows
        labels.Add(Convert.ToString(row("Date")))
    Next
    chartData.Add(labels)
    For Each row As DataRow In dtbal.Rows
        series1.Add(Convert.ToInt32(row("AMOUNT")))

    Next
    chartData.Add(series1)
    Return chartData
End Function

Above code are working perfectly.

The problem is on Javascript :

$(function () {
$("[id*=btnSearchTerm]").click(function () {
        LoadChart();
    });
});
function LoadChart() {
    var tdate = $("[id*=txtdate]").val();
    var term = $("[id*=txtSearchTerm]").val();

    $.ajax({
        type: "POST",
        url: "MonthlyBalancing.aspx/GetChart",
        data: "{TDate: '" + tdate + "', term: '" + term + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var labels = r.d[0];
            var series1 = r.d[1];
                var data = {
                labels: labels,
                datasets: [
                    {
                        label: "Dataset1",
                        backgroundColor: "rgba(38, 185, 154, 0.31)",
                        borderColor: "rgba(38, 185, 154, 0.7)",
                        pointBorderColor: "rgba(38, 185, 154, 0.7)",
                        pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointBorderWidth: 1,
                        data: series1
                    }]
            };

                $("#LineSumbalance").html("");
            var canvas = document.createElement('canvas');
            $("#LineSumbalance")[0].appendChild(canvas);

            //Fix for IE 8
            if ($.browser.msie && $.browser.version == "8.0") {
                G_vmlCanvasManager.initElement(canvas);
            }
            var ctx = canvas.getContext('2d');
                    var lineChart = new Chart(ctx).Line(data, {
                bezierCurve: false
                    });

        },
        failure: function (response) {
            alert('There was an error.');
        }
    });
}

I try to alert on every row and it's stuck on $.Ajax . It's not execute anything even failure.

Answer 1

There is at least one issue with naming: your control is <asp:TextBox ID="txtDate" but you call $("[id*=txtdate]").val(); which seems need to be txtDate (with capital D) too.

Regarding ajax - you need to debug the function to ensure what it gets on every step. Add debugger; or alert(); where it is necessary and run the code. For example, add

...
success: function (r) {
   alert(r);
   var labels = r.d[0];
...

and see if r will be defined.