jsonデータを取得した後にJavascriptにチャートが表示されない

Question

私はの<div id="LineSumbalance"></div>とtextboxのキーパラメータ、buttonの処理にはdivがあります。

<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である：私はすべての行を上に警告しようとすると、それが$.Ajaxに引っかかっています

$(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.'); 
     } 
    }); 
} 

。失敗しても何も実行しません。

Answer 1

名前付けには少なくとも1つの問題があります。制御は<asp:TextBox ID="txtDate"ですが、txtDate（大文字のD）も必要と思われる$("[id*=txtdate]").val();と呼んでください。

ajaxについて - 関数をデバッグして、すべてのステップで何が得られるかを確認する必要があります。必要な場合はdebugger;またはalert();を追加してコードを実行します。例えば、

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

を追加し、rが定義されるかどうかを確認します。