当我重新加载 div 时，Google 折线图不会重新加载

Question

我在使用 Google 折线图 API 时遇到问题。当我重新加载 div 时，折线图不会再次加载。

这是折线图的代码

<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() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');

        data.addRows(4);


         <?php 
            //gets line chart data
            echo $join;?>


        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 320, height: 250, title: ''});
  }

</script>

<h3>Sales History</h3>
    <table border="5" style="border-color: #3b6aa8;" >
        <tr>
            <td>
                <div id="chart_div" style="border: 1;border-color: green;"></div>
            </td>
        </tr>
</table>

用于重新加载 div 的代码

<script type="text/javascript">
$(document).ready(function() {


$('#sliderform').submit(function() {

    bodyContent = $.ajax({
          url: "dashboardreload.php",
          global: false,
          type: "POST",
          data: ({year : $("#yearval").val(), month: $("#monthval").val(),day : $("#dayval").val(),
          year1 : $("#year1val").val(), month1: $("#month1val").val(),day1 : $("#day1val").val()
                    }),
          dataType: "html",
          async:false,
          success: function(msg){
           //alert('test');
          }
       }
    ).responseText;

    $('#dash').html(bodyContent);
    //confirm(bodyContent);
    return false;


    });

});
</script>

Answer 1

所以我假设代码

$('#dash').html(bodyContent);

正在尝试将 div 重新插入页面
并且您正在从服务器获取新版本，

#dash 元素在您的代码中不可见，但我是
假设它是父标签。

这段代码试图

bodyContent = $.ajax({
      url: "dashboardreload.php",
      global: false,
      type: "POST",
      data: ({
         year : $("#yearval").val(), month: $("#monthval").val(),day : $("#dayval").val(),
      year1 : $("#year1val").val(), month1: $("#month1val").val(),day1 : $("#day1val").val()
                }),
      dataType: "html",
      async:false,
      success: function(msg){
       //alert('test');
      }
   }
).responseText;

首先在 javascript 中重新获取页面，您定义一个这样的变量，

var bodyContent = .....

否则您将遇到一些麻烦，否则在全局范围内

，其次 ajax 调用是异步的，您拥有的成功方法是什么
在 rdy 时为您提供服务器的响应

success: function(bodyContent){
   $('#dash').html(bodyContent);
}

我希望这有帮助

Answer 2

所以这可能是问题所在，

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

即使您正在重新加载此内容，页面仍然加载了这些引用
并且第二次可能不会调用drawChart，因为
谷歌脚本没有加载任何新内容

来解决这个问题，您可能想在加载新内容后自己调用drawChart函数，

success: function(msg){
   drawChart();
 }

也许这会有所帮助。格