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 はブラウザーに返されて実行されません。

私は次の2つのいずれかを行います。

  1. メソッド本体は戻り値SHtml.ajaxButtonを想定しているため、代わりに使用してくださいJsCmd
  2. 代わりに、次のようにイベントをバインドします。"#getChart [onclick]" #> SHtml.onEvent((str) => process())

どちらも本質的に同じことを行い、コードを機能させるはずです。オプション 1 は、HTML ボタン全体を 1 つのリフト レンダリングに置き換えます。オプション 2 はonclick、既存の HTML ボタンのイベントに ajax を追加するだけです。

もっと複雑なことをしていて、実際には ajax 呼び出しを行いたいと思いshowChart()ますが、クライアント側で呼び出しを追加したいだけの場合は、次のように簡単に言うことができます。"#getChart [onclick]" #> process().toJsCmd

于 2013-05-24T18:38:43.113 に答える