I am trying to include a str.js and jit.js file in nev.html. Both are in same directories but it is giving me a reference error: flask file in flask/app1.py When I run it using flask, it gives this error: directory structure /flask/templates directory structure /flask str.js file nev.html Answer Keep css and js in a folder under 'static' folder in

Reference error while including .js in .html in ubuntu using flask

I am trying to include a str.js and jit.js file in nev.html. Both are in same directories but it is giving me a reference error:

flask file in flask/app1.py

import json
import simplejson
from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def hello():
    return 'client.html'

@app.route('/returnjson')
def returnjson():
    str1 = json.dumps({"name":"Infinetly Beta","friends":[{"name":"Aamir","friends":[{"name":"Jesal","friends":[]}]},{"name":"Neville","friends":[{"name":"Kapil","friends":[]}]}]})
    return str1

@app.route('/neville')
def index():
    return render_template('nev.html')

if __name__ == "__main__":
     app.run(debug=True)

When I run it using flask, it gives this error:

neville@neville-laptop:~/Flask$ python app1.py
 * Running on http://127.0.0.1:5000/
 * Restarting with reloader
127.0.0.1 - - [30/Jan/2012 02:01:53] "GET /neville HTTP/1.1" 200 -
127.0.0.1 - - [30/Jan/2012 02:01:53] "GET /jit.js HTTP/1.1" 404 -
127.0.0.1 - - [30/Jan/2012 02:01:53] "GET /css/base.css HTTP/1.1" 404 -
127.0.0.1 - - [30/Jan/2012 02:01:53] "GET /css/RGraph.css HTTP/1.1" 404 -
127.0.0.1 - - [30/Jan/2012 02:01:53] "GET /str.js HTTP/1.1" 404 -
127.0.0.1 - - [30/Jan/2012 02:01:53] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [30/Jan/2012 02:01:54] "GET /returnjson HTTP/1.1" 200 -

directory structure /flask/templates

neville@neville-laptop:~/Flask$ ls -lc templates
total 912
-rw-r--r-- 1 neville neville    533 2012-01-29 04:52 client_(copy).html
-rw-r--r-- 1 neville neville    586 2012-01-28 05:01 client.html
drwxr-xr-x 2 neville neville   4096 2012-01-29 05:44 css
-rwxr-xr-x 1 neville neville   1628 2012-01-30 01:47 example1.html
-rw-r--r-- 1 neville neville    677 2012-01-27 14:03 ify.html
-rwxr-xr-x 1 neville neville 479578 2012-01-27 14:43 jit.js
-rwxr-xr-x 1 neville neville 158518 2012-01-27 14:43 jit-yc.js
-rw-r--r-- 1 neville neville 248235 2012-01-29 04:50 jquery.js
-rw-r--r-- 1 neville neville   1165 2012-01-30 02:01 nev.html
-rwxr-xr-x 1 neville neville   6963 2012-01-30 01:08 stripped.js
-rwxrwxrwx 1 neville neville   5767 2012-01-30 01:40 str.js

directory structure /flask

neville@neville-laptop:~/Flask$ ls -lc 
total 744
-rw-r--r-- 1 neville neville    524 2012-01-30 01:51 app1.py
-rw-r--r-- 1 neville neville    540 2012-01-28 01:27 app2.py
drwxr-xr-x 5 neville neville   4096 2012-01-27 07:19 env
-rw-r--r-- 1 neville neville    432 2012-01-28 04:58 hello.py
-rwxr-xr-x 1 neville neville 479578 2012-01-29 08:49 jit.js
-rw-r--r-- 1 neville neville 248235 2012-01-29 04:50 jquery.js
-rwxrwxrwx 1 neville neville   5767 2012-01-30 01:57 str.js
drwxr-xr-x 3 neville neville   4096 2012-01-30 02:01 templates

str.js file

function init(data){  
   document.getElementById('container').innerHTML = data.name;
}

nev.html

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!-- JIT Library File -->
    <script language="javascript" type="text/javascript" src="jit.js"></script>

    <!-- CSS Files -->
    <link type="text/css" href="/css/base.css" rel="stylesheet" />
    <link type="text/css" href="/css/RGraph.css" rel="stylesheet" />

    <title>WikiG</title>

    <!-- Example File -->
    <script language="JavaScript" type="text/JavaScript" src="str.js"></script>
    
            <script type="text/javascript">
            $(document).ready(function(){
            $("button").click(function(){
                $.getJSON("/returnjson",
                function(data){
                    init(data);
                });//getjson
            });//click
        });//ready
    
    </script>
    
</head>

<body>
    
    <button>Click me</button>
    <div id="container">
</body>
</html>

Answer

Keep css and js in a folder under ‘static’ folder in Flask app root directory. Something like following hierarchy helps:

Flask/static/javascripts/*.js
Flask/static/stylesheets/*.css

and change references in templates and other files.

Advertisement

Answer