how to call js function without event

javascript jquery html events function

55,532

Solution 1

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.

Solution 2

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>

Solution 3

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.

Solution 4

Put it in a <script> tag.

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

Solution 5

Add script tags.

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

View more solutions

55,532

Author by

Colleen

Been working with Django and Python for about a year now... but still have a lot to learn.

Updated on August 26, 2020

Comments

Colleen over 3 years
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?"
user113716 over 12 years

It's already located at the bottom of the page, so all preceding elements are available for manipulation.
Colleen over 12 years

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?"
KNU over 9 years

Can I ask why we are using {{}} double parenthesis here?
Prometheus almost 8 years

@KNU it is a bit late, but with {{}} usage, you can have the values of char_type, data and options variables.