1

这是我的 HTML 代码：

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

  function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string','Year');
      data.addColumn('number','D1');
      data.addColumn('number','D2');
      data.addRows(2);
      data.setValue(0,0,'1900');
      data.setValue(1,0,'1910');
      data.setValue(0,1,1);
      data.setValue(1,1,2);
      data.setValue(0,2,3);
      data.setValue(1,2,1);
      var options = {title: 'Tree Chart',
                     hAxis: {title: 'Time',  titleTextStyle: {color: 'red'}},
                     pointSize: 5};
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
  }

  function showChart(){  
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
  }

</script>
<form class="form-inline lift:form.ajax">
<div class="lift:DChart.render">
<button id="getChart" value="Get Chart" class="btn btn-inverse">Get Chart</button>
</div>
</form>
<div id="chart_div"></div>

该showChart()函数显示图表chart_div

这是我的电梯代码：

object DChart {
        def render = {
          def process():JsCmd = Run("showChart();")
          "#getChart"  #> SHtml.button("Get Chart", process)
        }
   }

单击按钮应该执行该showChart()功能..遗憾的是它不起作用..

请帮助我了解如何从 Lift 运行脚本功能！

4

2 回答 2

1

SHtml.button接受作为参数() => Any，因此任何 JavaScript 都不会返回到浏览器并执行。

我会做以下两件事之一：

  1. 改为使用SHtml.ajaxButton，因为方法体期望JsCmd返回
  2. 而是绑定事件，例如："#getChart [onclick]" #> SHtml.onEvent((str) => process())

两者基本上做同样的事情，应该让你的代码工作。选项 1 将用一个提升渲染替换您的整个 HTML 按钮，选项 2 只会将 ajax 添加到onclick现有 HTML 按钮上的事件中。

我假设您将做一些更复杂的事情，并且实际上想要进行 ajax 调用 - 但如果您只想添加showChart()调用客户端，您可以简单地说："#getChart [onclick]" #> process().toJsCmd

于 2013-05-24T18:38:43.113 回答
0

我已经弄清楚问题出在哪里了。我正在调用该方法showChart()，但该方法使用 google 函数setOnLoadCallback()，因此只有在调用该方法加载页面时才能显示图表（据我目前了解的情况）。

解决方案：只需调用该drawChart()方法！我已经使用该方法尝试了 jcern 发布的所有解决方案drawChart()，一切都在工作。

谢谢jcern :)

于 2013-05-27T14:04:01.257 回答