how to call js function without event

Question

How can I just call a js function from within an html file, with no event trigger? I want to have code like:

<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>

but this just results in the function call being printed to the screen, instead of the function actually being executed.

e.g. I'm getting show_graph(bar, [[1, 2000], [2, 50], [3, 400], [4, 200], [5, 5000]], ['Foo']);

What do I do?

EDIT:

I appreciate the feedback, but I tried wrapping it in a script tag and got an "invalid number of parameters" error.

the javascript is:

function show_graph(charttype, data, options){

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

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

so I suppose the real question is "why am I getting an "invalid number of parameters" error when I'm passing 3 parameters and accepting 3 parameters?"

score 15 · Accepted Answer · answered Aug 23 '11 at 22:34

15

Wrap it in <script> tags:

<body>

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

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

</body>

...though I don't know how the template factors in. I imagine it will render the same.

answered Aug 23 '11 at 22:34

user113716

318,772
63
451
440

Can I ask why we are using {{}} double parenthesis here? – KNU Aug 28 '14 at 06:42
2

@KNU it is a bit late, but with {{}} usage, you can have the values of char_type, data and options variables. – Prometheus Jun 01 '16 at 12:30

score 6 · Answer 2 · answered Aug 23 '11 at 23:20

6

Yet another answer:

<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>

answered Aug 23 '11 at 23:20

Rafael Herscovici

16,558
19
65
93

to all respondents: I appreciate the feedback, but I tried wrapping it in a script tag and got an "invalid number of parameters" error. the javascript is: function show_graph(charttype, data, options){ var chart_options = { series: { charttype: { show: true } } } var plot = $.plot($("#chart1"), [data], [chart_options]); } so I suppose the real question is "why am I getting an "invalid number of parameters" error when I'm passing 3 parameters and accepting 3 parameters?" – Colleen Aug 24 '11 at 02:30

score 5 · Answer 3 · edited May 23 '17 at 12:18

5

You need to wrap the function call in script tags like this:

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

If you need to validate as XHTML you should also wrap with CDATA. See When is a CDATA section necessary within a script tag? for a reference to that.

edited May 23 '17 at 12:18

Community

1
1

answered Aug 23 '11 at 22:34

Joe Landsman

2,177
13
9

score 4 · Answer 4 · answered Aug 23 '11 at 22:34

4

Put it in a <script> tag.

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

answered Aug 23 '11 at 22:34

Tim Withers

12,072
5
43
67

score 4 · Answer 5 · answered Aug 23 '11 at 22:35

4

Add script tags.

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

answered Aug 23 '11 at 22:35

j3ffz

715
1
6
17

score 1 · Answer 6 · answered Aug 23 '11 at 22:36

1

You should call the function when the page is loaded. To do so with jQuery use this code:

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

answered Aug 23 '11 at 22:36

Dan Mazzini

1,005
10
19

It's already located at the bottom of the page, so all preceding elements are available for manipulation. – user113716 Aug 23 '11 at 22:43

how to call js function without event

6 Answers6