Question

点击表单中的提交按钮后，我在加载Google图表时遇到问题。我在网上发现了许多类似的问题但没有解决我的问题，包括this。我的代码结构：我将google图表代码包装在submitHandler: function(form)中，然后用$("#timeuseform").validate({})包装整个submitHandler，然后最外面的是$(document).ready(function(){})。

当我删除Google图表代码时，一切正常。当我将Google图表代码复制并粘贴到submitHandler: function(form)时，整个页面都崩溃了。

这里是HTML：

<head>
  <meta charset="utf-8">
  <title>Time Use Survey 2014</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Do you sleep, work and play more than fellow Americans?</h1>
<br>
<hr width="100%" size="3" noshade="noshade" color="#8A8A8A"/>
<br>
<form name="myForm" id="timeuseform" method="get" action="#">

1. On average, how much you sleep per day?<br>
<input type="text" name="sleep" value="" id="inputsleep"/><br><br>
<div id="sleepbox"></div><br><br>

2. On average, how much time you work on your workday (excludes travel related to work)?<br>
<input type="text" name="work" value="" id="inputwork"/><br> and you are working 
<SELECT NAME="workstatus" SIZE="1" id="inputworkstatus">
<OPTION>full-time
<OPTION>part-time
</SELECT><br><br>
<div id="workbox"></div><br><br>

<input type="submit" value="Submit" id="button"/>
<INPUT TYPE="reset">
</form>

<br><br>
<div id="chart_div" style="width: 500px; height: 300px;"></div>

<script type="text/javascript" src="chart.js"></script>

</body>
</html>

这是JS：

$(document).ready(function(){

//form validation using jquery validation plugin
     $("#timeuseform").validate({
        rules: {
                    sleep: {
                        required: true,
                        number: true
                    },
                    work: {
                        required: true,
                        number: true
                    },
                },

//messages to be displayed if input cannot be validated
        messages: {
                    sleep: {
                        required: "Please answer this question",
                        number: "Your answer must be a number with maximum 1 decimal point"
                    },
                    work: {
                        required: "Please answer this question",
                        number: "Your answer must be a number with maximum 1 decimal point"
                    },
                },
//display error messages style if input cannot be validated
        errorPlacement: function(label, element) {
        label.insertAfter(element);
    },
    wrapper: 'span',            

submitHandler: function(form) {

//setting the input variables
        var inputsleep = $('#inputsleep').val(),
            inputwork = $('#inputwork').val();

//code for question 1 on sleep

        if(inputsleep>8){
            $("#sleepbox").text("You sleep too much!");
            $("#sleepbox").addClass("more");
        }
        else{
            $("#sleepbox").text("You sleep too little!");
            $("#sleepbox").addClass("less");
        }

//code for question 2 on work
            if(inputwork>6){
                $("#workbox").text("You work too much!");
                $("#workbox").addClass("more");
            }
            else{
                $("#workbox").text("You work too little!");
                $("#workbox").addClass("less");
            }

//code for google bar chart starts here
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data1 = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data1, options);
        }

    }   

});

});

我已经在我的github中上传了两个（没有谷歌图表代码）和破解（使用谷歌图表代码）。

在没有谷歌图表的情况下工作：http://kuangkeng.github.io/keng-data-journalism/timeuseform/nochart.html

用谷歌图表打破：http://kuangkeng.github.io/keng-data-journalism/timeuseform/chart.html

感谢是否有人可以指导我解决此问题。感谢。

Answer 1

将google.load和google.setOnLoadCallback调用移到jQuery代码之外。使用回调来初始化验证器而不是使用文档就绪：

function init () {
    $("#timeuseform").validate({
        // validator stuff
    });
}
google.load("visualization", "1", {packages:["corechart"], callback: init});

单击表单中的提交按钮后绘制Google图表

1 个答案: