“Uncaught ReferenceError: google is not defined” only when using load function

Question

我有一个包含两个 DatePickers 的页面，其中我 select 一个开始日期和一个结束日期。当按下名为 "Submit" 的按钮时，应该加载局部视图，但我得到错误 "Google is not defined"，这是在父视图中加载局部视图的代码：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script>
    $(function () {
        $("#txtdatepicker1").datepicker();
        $("#txtdatepicker2").datepicker();
    });
    function CalendarClick() {
        $("#divul").load("/Greenhouse/Calendarul?startDate=" + $("#txtdatepicker1").val() + "&endDate=" + $("#txtdatepicker2").val());
    }
</script>



<h2>
    Datepicker Calender
</h2>

@using (Html.BeginForm())
{
    <table>
        <tr>
            <td>
                <p>
                    Start Date: @Html.TextBoxFor(m => m.StartDate, new { @id = "txtdatepicker1", @style = "width:200px;" })
                </p>
            </td>
            <td>
                <p>
                    End Date: @Html.TextBoxFor(m => m.EndDate, new { @id = "txtdatepicker2", @style = "width:200px;" })
                </p>
            </td>
        </tr>
    </table>
    <input type="button" name="btnSubmit" value="Submit" onclick="CalendarClick()"/>
    <div id="divul"></div>
 }

这里是部分视图，但从未调用该函数：

@model Plotting.Models.ChartDate
@{
    ViewBag.Title = "How To Create Dynamic Google Column Chart In an Asp.Net MVC Application Using C# ";
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        alert("aaa");
        // Create and populate the data table.
        var days = [@Model.DateData.Date];
        var humidities1 = [@Model.DateData.Humidity1];
        var humidities2 = [@Model.DateData.Humidity2];
        var data = new google.visualization.DataTable();
        data.addColumn('string', '@Model.DateTitle');
        data.addColumn('number', '@Model.HumidityTitle1');
        data.addColumn('number', '@Model.HumidityTitlle2');
        for (i = 0; i < days.length; i++) {
            data.addRow([days[i].toString(), humidities1[i], humidities2[i]]);
        }
        var options = {
            title: 'Humidities Values',
            hAxis: { title: '@Model.DateTitle', titleTextStyle: { color: 'black' } }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

<fieldset>
    <legend><strong>Greenhouse</strong></legend>    
    <div id="chart_div" style="width: auto; height: auto;">
    </div>
</fieldset>

谢谢！

Answer 1

google.load() 在

之前调用

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 个文件已加载。

我建议尽可能早地加载此 jsapi 文件，即在 Index.php 或 Global Includes 中。

将此文件放在本地文件夹中然后加载它。

Answer 2

我猜测加载 google.com/jsapi 脚本不会将 google 带入全局范围并使其在 dom 中可访问，因此您无法对其调用方法

Answer 3

加载jsapi文件如下

$.getScript('https://www.google.com/jsapi',function (){
 google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
});

Answer 4

可能您可能需要 $(document).ready() 函数中的所有代码，似乎 google 脚本未加载。

“Uncaught ReferenceError: google is not defined” only when using load function

“Uncaught ReferenceError: google is not defined” only when using load function

javascript

jquery

asp.net-mvc-partialview