Javascript沒有在檢索json數據後填充圖表

Question

我有一個div來處理圖表<div id="LineSumbalance"></div>和textbox以使關鍵參數button觸發。

<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" /> 

我寫後面的代碼從數據庫中查詢數據：

<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 

上面的代碼是完美的工作。

的問題是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.'); 
     } 
    }); 
} 

我嘗試每一行提醒上它停留在$.Ajax。即使失敗也不會執行任何事情。

Answer 1

命名至少有一個問題：您的控件是<asp:TextBox ID="txtDate"，但您撥打$("[id*=txtdate]").val();，似乎也需要txtDate（大寫D）。

關於ajax - 您需要調試該函數以確保它在每一步中獲得的內容。在需要的地方添加debugger;或alert();並運行代碼。例如，添加

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

並查看r是否將被定義。