Uncaught SyntaxError: Unexpected token '%', Flask error when using a separate js file

Question

I am working on a flask app where I get the error above when I try to link my js file in my html page.

However, when I include the js logic under tag in the HTML file itself, I don't see the error and the page is rendered as expected

Approach used that causes error.

JS: stored in /static/js/alv.js

var lineData1 = {
labels : [
{% for item in mob %} //Error on this line Uncaught SyntaxError: Unexpected token '%'
"{{ item }}",
{% endfor %}
],

datasets : [{
fill: {
target: 'origin',
above: 'rgb(255, 0, 0)',   // Area will be red above the origin
below: 'rgb(0, 0, 255)'    // And blue below the origin
},
borderColor :  "rgba(0,175,233)",
fillColor:  "rgba(0,175,233)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
bezierCurve : true,
data : [
{% for item in apo %}
{{ item }},
{% endfor %}]
}
]
};

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;


steps = 5

/*Chart display options*/
var config1 =  {
type : "line",
data : lineData1,
scaleOverride: false,
scaleSteps : 10,
scaleStepWidth : 4,
scaleStartValue: 0,
scaleShowVerticalLines: true,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true,
bezierCurve: true,
options: {
title: {
display: true,
text: ['ATL_60K NoStress Blended','Attrition per Open(%)']
},
legend : { display : false },
responsive : true,
scales:{
xAxes:[{
display : true,
ticks: {
autoSkip: true,
maxTicksLimit: 20
},
scaleLabel: {
display : true,
labelString : 'MOB'
}
}],
yAxes:[{
display : true,
scaleLabel: {
display : true,
labelString : 'Attrition Rate'
}
}]
}
},
plugins: {
datalabels: {
display: false,
}
}
};
/* get chart canvas */
var attr_chart = document.getElementById("attr_line").getContext("2d");
/* draw charts */
var attr_line = new Chart(attr_chart,config1);
/* Load each chart and hide() the tab immediately. */
$('#tab1').hide();
$('#tab1_btn').on('click',function(){
$('#tab1').show();

HTML: /templates/alv.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/nav-bar.css') }}">
</head>

<body>
  <center>

<div class="navbar">
  <a href="/">Home</a>
  <a href="/alv">ALV</a>
  <div class="dropdown">
  <button class="dropbtn">ACE
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Partner 1</a>
    <a href="#">Partner 2</a>
    <a href="#">Partner 3</a>
  </div>
  </div>
</div>

  <center>
    <h1>{{ title }}</h1>

<button id="tab1_btn">Attrition per Open</button>
<div id="tab_cover"> </div>
<div id="tabs">
    <div id="tab1" class="tab">
        <canvas id="attr_line" class="chart" width="400" height="300"></canvas>
    </div>
</div>

<script src="{{url_for('static', filename='js/alv.js')}}"></script>
  </center>
</body>
</html>

I'm facing the error when I use the above approach i.e calling the js file from an external location using a link in the HTML

however, if I include the whole js logic in the tag, it's working fine.

Hope I'm clear. Please help me out

thanks

Aditya · Accepted Answer · 2020-10-23 04:05:04Z

2

This problem arises because you can't use Jinja templating in a file which is not rendered by flask but is a static file. In this question several methods of using flask variables in external js is explained. Pass parameter with Python Flask in external Javascript

Explanation of Problem When you use {%%} or {{}} this code can't be understood by html or browser so when the flask renders it, it convert those logic and variables into html. But for this flask needs to know that you are rendering a file containing Jinja tags. We do this when we call render_template() and pass the html file in it. But in case of js files we don't tell flask that we are rendering a js file because in most cases it is used for client side coding so flask need not know that. But in some cases like yours you have to use flask variables in js. Unfortunately there is no direct way to do this so we have to do this in a hack(ish) way as you have seen in that thread.

edited Oct 23, 2020 at 4:05

answered Oct 23, 2020 at 2:18

Aditya

1841 gold badge1 silver badge13 bronze badges

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

4 Comments

Sai Pardhu Over a year ago

using the %include and putting my js in templates folder has worked. But i still don't understand the explanation you provided

Aditya Over a year ago

@Sai Pardhu sorry I actually haven't explained the cause of problem. I have edited the my answer. Hope it helps:)

Sai Pardhu Over a year ago

That helps, thanks :) . Is there a correct approach for it then? How would someone do it in a scenario like mine. Or is there an other better approach?

Aditya Over a year ago

I think assigning variables in a script tag and then using those variables in external js file(last answer in that thread) is fine for your use. I haven't done any serious js work in flask so I can't recommend a better approach but I still think that the last one is fine. One more thing, I would not recommend moving js file to templates folder.

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token '%', Flask error when using a separate js file

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related