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

Question

I have a page with two DatePickers where i select a start date and a end date. When the button named "Submit" is pressed the partial view should be loaded ,but i get the error "Google is not defined", Here is the code for in the parent view which load the partial view :

<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>
 }

And here is the partial view, but the function is never called :

@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>

Thank you!

score 0 · Answer 1 · answered Aug 06 '15 at 09:48

0

google.load() is called before

<script type="text/javascript" src="https://www.google.com/jsapi"></script> files is loaded.

I suggest to load this jsapi file earlier as possible i.e in Index.php or Global Includes.

put this file in local folder then load it.

answered Aug 06 '15 at 09:48

Kaleem Ullah

6,799
3
42
47

Do this. `$( document ).ready(function() { google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); });` – Kaleem Ullah Aug 06 '15 at 11:13
Still the same error.. I don't know what i'm doing wrong. – Maria Aug 06 '15 at 12:38
try to find page that cause error, to do so remove lines of code one by one and run app. – Kaleem Ullah Aug 06 '15 at 16:05

score 0 · Answer 2 · answered Aug 06 '15 at 09:50

0

I'm guessing that loading google.com/jsapi script doesn't bring google into the global scope and make it accessible in the dom, so you can't call methods on it

answered Aug 06 '15 at 09:50

nguyen

71
2

score 0 · Answer 3 · answered Aug 06 '15 at 10:18

0

load the jsapi file as follow

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

answered Aug 06 '15 at 10:18

Aneel Mehta

174
1
1
9

I tried this to , but when i pressed the button nothing appears and the body is deleted. Even the main view disappeared. – Maria Aug 06 '15 at 10:34
check [link]http://stackoverflow.com/questions/9519673/why-does-google-load-cause-my-page-to-go-blank#answer-9520427 – Aneel Mehta Aug 06 '15 at 11:23

score 0 · Accepted Answer · edited Aug 07 '15 at 10:05

0

Probably you may need all your code inside $(document).ready() funtion, seems the google script is not loaded.

edited Aug 07 '15 at 10:05

seenukarthi

8,241
10
47
68

answered Aug 07 '15 at 09:37

Santhakumar P

51
2

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

4 Answers4