Question

这是我的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()功能..遗憾的是它不起作用..

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

Answer 1

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

我会做两件事之一：

使用SHtml.ajaxButton代替，因为方法正文需要JsCmd返回
绑定事件，例如："#getChart [onclick]" #> SHtml.onEvent((str) => process())

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

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

Answer 2

我已经弄清楚问题是什么..我正在调用方法showChart()但这个方法使用了google函数setOnLoadCallback()，因此只有在调用方法时才会显示图表加载页面（据我目前所知）。

解决方案：只需调用drawChart()方法！我尝试使用drawChart()方法从jcern发布的每个解决方案，都在运行。

thx jcern：）

如何在单击按钮后使用Lift调用javascript函数？

2 个答案: