CODEWITHSUNDEEP
javascriptpythonhtmlflask
Frisco
Frisco

Reputation: 75

Uncaught ReferenceError: $ is not defined python flask

I'm trying to run my JavaScript to just produce alert when the button is clicked on python flask. The problem I am having is i'm having is an error in JS file first line: Uncaught ReferenceError: $ is not defined. Even swapping first $ with jQuery still doesn't work.

My structure is:

app: - main.py
     - static    - js - mainJs.js
                    - lib -  jquery-2.2.4.min.js
                          -  jquery-ui.js

                 - css - stylesheet.css
     - templates - index.html

I am sure I imported everything correctly, since my html file is:

<!DOCTYPE html>
<html>
<head>
    <title>First doc</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/stylesheet.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/mainJs.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-2.2.4.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/lib/jquery-ui.js') }}"></script>
</head>
<body>

    {{err}}
    <form id="commentForm" action="/addComment" method="POST">
        <table>
            <tr>
                <td>
                    <textarea id="username" rows="1" cols="50"  name="username"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea rows="4" cols="50" id="textArea" name="thetext"></textarea>
                </td>
            </tr>
        </table>
        <input id="rand" type ="submit" value="Submit" onclick = "substitute()" />
    </form>

    {% for item in Message %}
    <table>
        <tr>
            <td>
                {{item}}
            </td>
        </tr>
    </table>
    {% endfor %}
    <div id="testDiv"> 
    </div>
</body>
</html>

And my JavaScript file is simply:

$(document).ready(function(){
    $("#rand").click(function(){
        window.alert("its working!");
    });
});

Upvotes: 4

Views: 4302

Answers (1)

Ander2
Ander2

Reputation: 5658

The order you load the.js files matters, as you are referencing $ in your file before loading jquery.

Put your file import, after jquery`s to solve the problem.

Upvotes: 9

Related Questions