2011-08-23 20 views
7

イベントトリガーなしでhtmlファイル内からjs関数を呼び出すにはどうすればよいですか?私は次のようなコードを持っています:イベントなしでjs関数を呼び出す方法

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="jquery.flot.js"></script> 
<script src="chart.js"></script> 

<title> 
</title> 
</head> 

<body> 

<div id="chart1" style="width:600px;height:300px"></div> 

show_graph({{ chart_type }}, {{ data }}, {{ options }}); 

</body> 

</html> 

しかし実際に実行される関数ではなく、関数呼び出しが画面に表示されるだけです。

私は得ています show_graph(bar、[[1、2000]、[2,50]、[3,400]、[4,200]、[5、5000]]、['Foo']);

私は何をしますか?

EDIT:

私はフィードバックを感謝し、私はスクリプトタグでラップしようと、「無効な数のパラメーターの」エラーを得ました。

ジャバスクリプトは次のようになります。

function show_graph(charttype, data, options){ 

    var chart_options = { 
     series: { 
      charttype: { 
       show: true 
      } 
     } 
    } 

    var plot = $.plot($("#chart1"), [data], [chart_options]); 
} 

ので、私は、本当の問題は、無効な数値パラメータの「なぜ私が取得しています 『されているとし、』私は3つのパラメータを渡すと、3つのパラメータを受け入れていたときにエラーが?」

答えて

13

<script>タグで包み:。私はそれが同じレンダリングする方法テンプレート要因想像では分からないのに...

<body> 

<div id="chart1" style="width:600px;height:300px"></div> 

<script type="text/javascript"> 
    show_graph({{ chart_type }}, {{ data }}, {{ options }}); 
</script> 

</body> 

+0

は私が求めることができますか? – KNU

+1

@KNU少し遅いですが、{{}}用法を使用すると、char_type、data、およびoptions変数の値を持つことができます。 – Prometheus

4

次のようなスクリプトタグ内の関数呼び出しをラップする必要があります。

<script type="text/javascript"> 
show_graph({{ chart_type }}, {{ data }}, {{ options }}); 
</script> 

あなたはXHTMLとして検証する必要がある場合もCDATAでラップする必要があります。そのことについては、When is a CDATA section necessary within a script tag?を参照してください。

3

<script>タグに入れてください。

<script type='text/javascript'>show_graph({{ chart_type }}, {{ data }}, {{ options }});</script>

3

スクリプトタグを追加します。

<script> 
show_graph({{ chart_type }}, {{ data }}, {{ options }}); 
</script> 
0

ページが読み込まれたら関数を呼び出す必要があります。 jQueryのは、このコードを使用してこれを実行するには:

<script type="text/javascript"> 
    $(document).ready(function() { 
    show_graph({{ chart_type }}, {{ data }}, {{ options }}); 
    }); 
</script> 
+0

これは既にページの一番下にあります。そのため、先行するすべての要素を操作できます。すべての回答者に – user113716

4

をさらに別の答え:私たちはここに、{{}}二重括弧を使用している理由

<script type="text/javascript"> 
    (function() { 
     // The following code will be enclosed within an anonymous function 
     var foo = "Goodbye World!"; 
     document.write("<p>Inside our anonymous function foo means '" + foo + '".</p>'); 
    })(); // We call our anonymous function immediately 
</script> 
+0

:フィードバックをいただきありがとうございますが、スクリプトタグでラップして「無効な数のパラメータ」エラーが発生しました。 ジャバスクリプトである: 関数show_graph(ChartTypeを、データ、オプション){ するvar chart_options = { 系列:{ ChartTypeを:{ 表示:真 } } } VARプロット= $ .PLOT ($( "#chart1")、[data]、[chart_options]); } 本当の質問は、「3つのパラメータを渡して3つのパラメータを受け入れると、なぜ「無効な数のパラメータ」エラーが発生するのでしょうか? – Colleen

関連する問題