在AJAX调用的页面上使用Google图表

Question

大家好，并提前感谢您的帮助！

我有一个我建立的客户报告区域，它使用谷歌图表来显示数据，这一切都很好，工作正常（见下图）。我遇到的问题是管理员用来选择不同客户端的下拉框使用ajax更改页面。

jQuery的：

$("#adminCall").live("submit", function() {
    var fields = $(this).serialize();
        $.ajax({
                  type: 'POST',
                  url: '/ajax/admin-calls-ajax.php',
                  data: fields,
                  success: function(data)   
                  {     
                     $("#results").html(data);                   
                  }
            });
    return false;
});

调用的PHP文件是正确显示的文件的精确副本，但将客户端ID作为post变量传递。

Google图表代码（在两个文件中）

<script type="text/javascript">
  function drawVisualization() {
    // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(<?=$jsonTable?>);
  new google.visualization.ColumnChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    isStacked: true,
                    width: 780, height: 300,
                    fontSize: 10,
                    vAxis: {maxValue: <?php echo $maxval; ?>, minValue: 0}}
            );
  }
  google.setOnLoadCallback(drawVisualization);
  </script>
  <div id="visualization" style="width: 780px; height: 300px;"></div>

在AJAX调用之后，javascript不会触发，我想我知道应该是这种情况但是不能想到它的逻辑方式，因为JSON是由AJAX调用的PHP文件生成的。

有人有任何建议吗？

Answer 1

在ajax调用之前和之后，您的ajax请求是否通过（请检查Chrome文档检查器＆gt;＆gt;网络）。如果是的话

尝试在发送ajax代码的php文件中用google.setOnLoadCallback(drawVisualization);替换drawVisualization()

google.setOnLoadCallback(drawVisualization)对加载页面时要调用的方法drawVisualization进行排队。在通常的Web请求/响应流程中，在加载了所有页面元素，即脚本，样式表图像等之后调用此方法。

但是，当你通过ajax调用它时，页面已经加载，并且永远不会进行此调用。因此，必须直接使用drawVisualization()调用该函数。