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

user113716 · Accepted Answer · 2011-08-23 22:34:07Z

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, 2011 at 22:34

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KNU Over a year ago

Can I ask why we are using {{}} double parenthesis here?

Prometheus Over a year ago

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

Rafael Herscovici · Accepted Answer · 2011-08-23 23:20:57Z

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, 2011 at 23:20

Rafael Herscovici

17.2k19 gold badges68 silver badges94 bronze badges

1 Comment

Colleen Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:18:14Z

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, 2017 at 12:18

CommunityBot

11 silver badge

answered Aug 23, 2011 at 22:34

Joe Landsman

2,17713 silver badges9 bronze badges

Comments

Tim Withers · Accepted Answer · 2011-08-23 22:34:47Z

4

Put it in a <script> tag.

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

answered Aug 23, 2011 at 22:34

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

Comments

j3ffz · Accepted Answer · 2011-08-23 22:35:15Z

4

Add script tags.

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

answered Aug 23, 2011 at 22:35

j3ffz

7151 gold badge6 silver badges18 bronze badges

Comments

Dan Mazzini · Accepted Answer · 2011-08-23 22:36:57Z

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, 2011 at 22:36

Dan Mazzini

1,00110 silver badges19 bronze badges

1 Comment

user113716 Over a year ago

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

Collectives™ on Stack Overflow

how to call js function without event

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related