Django template not executing js function

Question

I have a django template that looks like this:

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/jquery.flot.js"></script>
<!--<script src="c:/src/project/scraper/collegedata/templates/chart.js" type="text/javascript"></script>-->
<script src="{{ STATIC_URL }}js/chart.js" type="text/javascript"></script>

</head>

<body>

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


    <script>
       show_graph("{{ chart_type }}", {{ series_names }}, {{ data }}, {{ answer }});
    </script>

    <form action="start">
        <input type="submit" value="Back to Questions" />
    </form>

</body>

</html>

where show_graph is a function in chart.js. However, pycharm gives me one of two errors, either: unresolved function or method show_graph(), or invalid number of parameters passed: expected 4

and the function is clearly not being called.

I'm a little confused as to whether or not I can even pass template vars to a js function at all...

Does anyone have any insight?

EDIT:

this generates

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"   type="text/javascript"></script>
<script src="/static/js/jquery.flot.js"></script>
<!--<script src="c:/src/project/scraper/collegedata/templates/chart.js" type="text/javascript"></script>-->
<script src="/static/js/chart.js" type="text/javascript"></script>

</head>

<body>

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


    <script>
       show_graph("pie", [&lt;ResponseOption: puddentane&gt;, &lt;ResponseOption: down the lane&gt;], [1, 0], 0);
    </script>

    <form action="start">
        <input value="Back to Questions" type="submit">
    </form>

</body></html>

where chart.js looks like (values temporarily hardcoded for troubleshooting, and it should be mentioned that $.plot also gives an unresolved function error):

function show_graph(charttype, series_names, data, answer_index){

    var data = [2000, 50, 400, 200, 5000];

    var data3 = [
    { label: "my cat",  data: 10, color: 'rgb(85, 96, 42)'},
    { label: "my friends",  data: 20, color: 'rgb(105, 118, 52)'},
    { label: "my boyfriend",  data: 30, color: 'rgb(125, 141, 62)'},
    { label: "my job",  data: 30, color: '#42215F'},
    { label: "food",  data: 10, color: 'rgb(145, 164, 72)'},
    { label: "social skills",  data: 0, color: 'rgb(166, 189, 82)'}
];

    alert("in chart.js");

    var charttype = "pie";

    var type = {};
    type[charttype] = {show: true};

    var chart_options = {};
    chart_options["series"]=type;

    var plot = $.plot($("#chart1"), data3, chart_options);
}

What does the markup this code generates look like? (View source in browser) — Jani Hartikainen
– Jani Hartikainen, Commented Aug 27, 2011 at 23:54
Seconding the need to show the source - specifically, paste the show_graph line that gets generated. — Sam Starling
– Sam Starling, Commented Aug 28, 2011 at 0:07

Sam Starling · Accepted Answer · 2011-08-28 00:23:25Z

1

It looks like series_names is just being output as the HTML entities of an object without a proper __unicode__ method. You're getting:

show_graph("pie", [&lt;ResponseOption: puddentane&gt;,

Which, decoded, is:

show_graph("pie", [<ResponseOption: puddentane>, ...

What actually needs passing to the method? You probably need to think about how you want {{ series_names }} to be output, rather than just calling the string representation of that variable. What you're generating at the moment is invalid Javascript - the console of your browser will probably reinforce this point.

answered Aug 28, 2011 at 0:23

Sam Starling

5,3743 gold badges37 silver badges53 bronze badges

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

3 Comments

Colleen Over a year ago

I will address that issue later, thank you. However, at the moment, I'm not actually using series_names-- I've got the values hardcoded in and it is still not working

Mike DeSimone Over a year ago

That's irrelevant. Both [<ResponseOption: puddentane>, and [<ResponseOption: puddentane>, are invalid JavaScript and should not be there. If you're not using them, replace {{ series_names }} with [].

Colleen Over a year ago

Sam and Mike are the winners: the invalid javascript was preventing the code from running. THANKS!

Mike DeSimone · Accepted Answer · 2011-08-28 00:06:04Z

1

Invalid number of parameters means one of your context variables, probably answer, was blank.

Your code is risky because Django will escape your context variables to be HTML safe, not JavaScript safe. One trick I use to get around this is to put all the parameters to a JS function in a dictionary, then convert it to JSON and use that for the context variable (using it with the |safe filter, and the <![CDATA[ markup in the template if needed).

As for show_chart not being resolved, you might want to make sure chart.js really is being loaded, and that it's not in a namespace of some form.

answered Aug 28, 2011 at 0:06

Mike DeSimone

43k10 gold badges79 silver badges97 bronze badges

2 Comments

Colleen Over a year ago

How would I go about checking to see if chart.js is really being loaded? That may well be the problem here.

Mike DeSimone Over a year ago

Use debugging tools with your browser. In Firefox, install Firebug and turn it on. In Safari, enable the Developer menu in Preferences. There's a Resources tab or equivalent that shows each thing loaded for the page and any status codes.

Collectives™ on Stack Overflow

Django template not executing js function

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related